Vue.js Pareto Chart

Download Vue.js Chart Samples

Vuejs pareto chart is a combination of column & line chart. Below example show a pareto chart with axis color customization.

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        chart: null,
        options: {
          title:{
            text: "Restaurant Complaints"
          },
          axisY: {
            title: "Count of Complaints",
            lineColor: "#4F81BC",
            tickColor: "#4F81BC",
            labelFontColor: "#4F81BC"
          },
          axisY2: {
            title: "Percent",
            suffix: "%",
            lineColor: "#C0504E",
            tickColor: "#C0504E",
            labelFontColor: "#C0504E",
            includeZero: true
          },
          axisX: {
            title: "Type of Complaints",
            labelAngle: -90,
            labelMaxWidth: 70,
            labelTextAlign: "center"
          },
          data: [{
            type: "column",
            name: "Complaints",
            yValueFormatString: "#,##0",
            dataPoints: [
              { label: "Overpriced", y: 875 },
              { label: "Quantity", y: 648 },
              { label: "Wait Time", y: 153 },
              { label: "Tasteless", y: 78 },
              { label: "Ambience", y: 42 },
              { label: "Not Clean", y: 35 },
              { label: "Noisy", y: 23 },
              { label: "Unfriendly Staff", y: 17 }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    },
    methods: {
      createPareto(){
        let dps = [];
        let chart = this.chart;
        let yValue, yTotal = 0, yPercent = 0;
        for(let i = 0; i < chart.data[0].dataPoints.length; i++)
          yTotal += chart.data[0].dataPoints[i].y;
        for(let i = 0; i < chart.data[0].dataPoints.length; i++){
          yValue = chart.data[0].dataPoints[i].y;
          yPercent += (yValue / yTotal * 100);
          dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent});
        }
        chart.addTo("data",{type:"line", yValueFormatString: "0.##\"%\"", dataPoints: dps});
        chart.data[1].set("axisYType", "secondary", false);
        chart.axisY[0].set("maximum", Math.round(yTotal / 1000) * 1000);
        chart.axisY2[0].set("maximum", 100);
	    },
      chartInstance(chart) {
        this.chart = chart;
        this.createPareto();
      }
    }
  }
</script>
  
<template>
    <CanvasJSChart :options="options" :style="styleOptions" @chart-ref="chartInstance"/>
</template>                              
/*main.js*/
import { createApp } from 'vue'
import App from './App.vue'

import CanvasJSChart from '@canvasjs/vue-charts';

const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

Chart Customizations

In the above example, color of axis labels, ticks, line are set using labelFontColor, tickColor & lineColor properties respectively. Setting includeZero to true sets axis range in such a way that zero is part of it.

Note   For step by step instructions, follow our Vuejs Integration Tutorial