Pareto in Vue Chart Component

5 Jul 202310 minutes to read

Pareto chart

Pareto charts are used to find the cumulative values of data in different categories. It is a combination of Column and Line series. The initial values are represented by column chart and the cumulative values are represented by Line chart. To render a pareto chart, use series type as Pareto and inject ParetoSeries ColumnSeries and LineSeries module.

app.vue

<template>
    <div id="app">
         <ejs-chart id="container":title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Pareto' xName='x' yName='y' name='Defect' width='2'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>
import Vue from "vue";
import {ChartPlugin, LineSeries, StackingColumnSeries, Tooltip, ColumnSeries, Category, Legend, ParetoSeries} from "@syncfusion/ej2-vue-charts";

Vue.use(ChartPlugin);

export default {
  data: function() {
    return {
      seriesData: [
                    { x: 'Traffic', y: 56 }, { x: 'Child Care', y: 44.8 },
                    { x: 'Transport', y: 27.2 }, { x: 'Weather', y: 19.6 },
                    { x: 'Emergency', y: 6.6 }
              ],
        primaryXAxis: {
           valueType: 'Category',
           title: 'Defects'
        },
        primaryYAxis:
        {
            title: 'Frequency',
            minimum: 0,
            maximum: 150,
            interval: 30,
        },

      title: 'Defect vs Frequency',
      tooltip: {
            enable: true,
            shared: true
        }

    };
  },
  provide: {
    chart: [StackingColumnSeries, LineSeries, Category, ColumnSeries, Legend, Tooltip, ParetoSeries]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Pareto customization

The pareto line series can be customized by using the marker, width, dashArray, and fill properties in the paretoOptions. The secondary axis for the pareto series can be shown or hidden using the showAxis property.

app.vue

<template>
    <div id="app">
         <ejs-chart id="container":title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings' :tooltip='tooltip' :chartArea='chartArea'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Pareto' xName='x' yName='y' name='Defect' width='2' opacity= 0.75 columnWidth= 0.4
                  :paretoOptions='paretoOptions' :cornerRadius='cornerRadius'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>
import Vue from "vue";
import { Browser } from '@syncfusion/ej2-base';
import {ChartPlugin, LineSeries, StackingColumnSeries, Tooltip, ColumnSeries, Category, Legend, ParetoSeries, Highlight} from "@syncfusion/ej2-vue-charts";

Vue.use(ChartPlugin);

export default {
  data: function() {
    return {
        seriesData: [
            { x: 'Button Defect', y: 23 }, { x: 'Pocket Defect', y: 16 },
            { x: 'Collar Defect', y: 10 }, { x: 'Cuff Defect', y: 7 },
            { x: 'Sleeve Defect', y: 6 }, { x: 'Other Defect', y: 2 } 
        ],
        primaryXAxis: {
            interval: 1,
            valueType: 'Category',
            majorGridLines: { width: 0 }, minorGridLines: { width: 0 },
            majorTickLines: { width: 0 }, minorTickLines: { width: 0 },
            lineStyle: { width: 0 }, labelIntersectAction: 'Rotate45',
        },
        primaryYAxis:
        {
            title: 'Frequency of Occurrence',
            minimum: 0,
            maximum: 25,
            interval: 5,
            lineStyle: { width: 0 },
            majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
            minorGridLines: { width: 1 }, minorTickLines: { width: 0 }
        },
        chartArea: {
            border: {
              width: 0
            }
        },
        paretoOptions: {
            marker: { visible: true, isFilled: true, width: 7, height: 7 },
            dashArray: '3,2',
            width: 2,
            fill: '#F7523F'
        },
        cornerRadius: { topLeft: Browser.isDevice? 4 : 6, topRight: Browser.isDevice ? 4 : 6 },
        title: 'Defects in Shirts',
        legendSettings: {
            visible: true,
            enableHighlight: true
        },
        tooltip: {
            enable: true,
            shared: true,
            format: '${series.name} : <b>${point.y}</b>'
        },
    };
  },
  provide: {
    chart: [StackingColumnSeries, LineSeries, Category, ColumnSeries, Legend, Tooltip, ParetoSeries, Highlight]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

See also

• Data label
• Tooltip