By Jakub Juszczak

Translation: the original huziketang.com/blog/posts/… Creating stunning Charts with vue.js and chart.js

Please indicate the source, keep the original link and author information

Learn more about chart.js options to create beautiful charts. Interactive charts can provide a cool way to visualize your data. But most out-of-the-box solutions don’t make pretty charts with the default options.

In this article, I’ll show you how to customize the chart.js option to make cool charts.

⚡ Quick Start

We need:

  • Vue.js
  • vue-chart.js
  • vue-cli

Use vue-CLI to build the basic architecture, hopefully you have it installed. We use vue-chart.js as the packager for chart.js.

vue init webpack awesome-chartsCopy the code

Then go to the project directory to install dependencies:

cd awesome-charts && yarn installCopy the code

Add the vue – chartjs:

yarn add vue-chartjs -SCopy the code

The first chart

Now let’s create our first discount table.

touch src/components/LineChart.js && subl .Copy the code

Now you need to import the base table of the line table from vue-Chartjs to create the component.

Call the renderChart() method in the mount() function with our prepared data and options.

    import {Line} from 'vue-chartjs'

    export default Line.extend({
      mounted () {

        this.renderChart({
          labels: ['January'.'February'.'March'.'April'.'May'.'June'.'July'].datasets: [{label: 'Data One'.backgroundColor: '#FC2525'.data: [40.39.10.40.39.80.40] {},label: 'Data Two'.backgroundColor: '#05CBE1'.data: [60.55.32.10.2.12.53]}]}, {responsive: true.maintainAspectRatio: false})}})Copy the code

In the code, use some instance data and optional parameters passed to the chart.js data object, and set Responsive: True so that the chart will fill the outer container.

We can use the renderChart() method because we inherit from BaseChart, where this method and some properties are defined.

Run & Test

Ok, now delete hello. vue from app. vue and introduce our chart:

    <template>
      <div id="app">
        <div class="container">
          <div class="Chart__list">
            <div class="Chart">
              <h2>Linechart</h2>
              <line-example></line-example>
            </div>
          </div>
        </div>
      </div>
    </template>

    <script>
    import LineExample from './components/LineChart.js'
    export default {
      name: 'app',
      components: {
        LineExample
      }
    }
    </script>

    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .container {
      max-width: 800px;
      margin:  0 auto;
    }
    </style>
    CopyRawCopy the code

Run the dev script in the terminal and you can see the diagram.

yarn run dev Copy the code

Make me more beautiful

Now it’s time to do some beautification 💄, chart.js has a lot of cool tricks. Can pass a hexadecimal color data to backgroundColor, can also pass rGBA () value, can also set the color transparency. Chart.js uses the HTML canvas to draw, so we use createLinearGradient().

This is where the fun starts, and to use it we need a Canvas object. But it’s not that hard, a reference to it already exists in Vue-Chartjs. We can access this using this.$refs.canvas.

In linechart.js, we created two variables to hold the gradient. The code is as follows:

    this.gradient = this. $refs. Canvas. GetContext ('2D) createLinearGradient (0.0.0.450)
    this.gradient2 = this. $refs. Canvas. GetContext ('2D) createLinearGradient (0.0.0.450)Copy the code

There is another function you can use: addColorStop()

Create three color points for each gradient:

    this.gradient.addColorStop(0, 'rgba (255.0.0.0.5) ')this.gradient.addColorStop(0.5, 'rgba (255.0.0.0.25) ");this.gradient.addColorStop(1, 'rgba (255.0.0.0) ");this.gradient2.addColorStop(0, 'rgba (0.231.255.0.9) ')this.gradient2.addColorStop(0.5, 'rgba (0.231.255.0.25) ");this.gradient2.addColorStop(1, 'rgba (0.231.255.0) ");Copy the code

Now you can pass this.gradient to backgroundColor to get a nice gradient. For better results, you can also set the color of the borderColor, alpha to 1 (or hexadecimal will work), borderWidth to 1, and pointColor.

BorderColor: '#FC2525', pointBackgroundColor: 'white', borderWidth: 1, pointBorderColor: 'white',Copy the code
    import {Line} from 'vue-chartjs'

    export default Line.extend({
      data () {
        return {
          gradient: null.gradient2: null
        }
      },
      mounted () {
        this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0.0.0.450)
        this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0.0.0.450)

        this.gradient.addColorStop(0.'rgba (255, 0, 0, 0.5)')
        this.gradient.addColorStop(0.5.'rgba (255, 0, 0, 0.25)');
        this.gradient.addColorStop(1.'rgba(255, 0, 0, 0)');

        this.gradient2.addColorStop(0.'rgba (0, 231, 255, 0.9)')
        this.gradient2.addColorStop(0.5.'rgba (0, 231, 255, 0.25)');
        this.gradient2.addColorStop(1.'rgba(0, 231, 255, 0)');


        this.renderChart({
          labels: ['January'.'February'.'March'.'April'.'May'.'June'.'July'].datasets: [{label: 'Data One'.borderColor: '#FC2525'.pointBackgroundColor: 'white'.borderWidth: 1.pointBorderColor: 'white'.backgroundColor: this.gradient,
              data: [40.39.10.40.39.80.40] {},label: 'Data Two'.borderColor: '#05CBE1'.pointBackgroundColor: 'white'.pointBorderColor: 'white'.borderWidth: 1.backgroundColor: this.gradient2,
              data: [60.55.32.10.2.12.53]}]}, {responsive: true.maintainAspectRatio: false})}})Copy the code

The last step

The final step is to add some styles to the app.vue container.

    .Chart {
      background: # 212733;
      border-radius: 15px;
      box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
      margin:  25px 0;
    }

    .Chart h2 {
      margin-top: 0;
      padding: 15px 0;
      color:  rgba(255, 0, 0, 0.5);border-bottom: 1px solid #323d54;
    }Copy the code

The final result

The final result is shown as follows:

Happy Coding! If this article is helpful to you, please follow my column – The Front End big ha, regularly publish high quality front end articles.

I’m currently working on a little book called React.js.