Pareto Chart is a combination of Column and Line Charts that is used to identify the cause of a quality problem or loss. Below example shows React Pareto Chart along with source code that you can run locally.
/* App.js */ import React, { Component } from 'react'; import CanvasJSReact from '@canvasjs/react-charts'; //var CanvasJSReact = require('@canvasjs/react-charts'); var CanvasJS = CanvasJSReact.CanvasJS; var CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { constructor() { super(); this.createPareto = this.createPareto.bind(this); } componentDidMount(){ this.createPareto(); } createPareto(){ var dps = []; var chart = this.chart; var yValue, yTotal = 0, yPercent = 0; for(var i = 0; i < chart.data[0].dataPoints.length; i++) yTotal += chart.data[0].dataPoints[i].y; for(var 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 / 20) * 20); chart.axisY2[0].set("maximum", 100); } render() { const options = { title:{ text: "Customer Complaints" }, axisX : { title: "Type of Defect" }, axisY: { title: "Number of Defects", lineColor: "#4F81BC", tickColor: "#4F81BC", labelFontColor: "#4F81BC" }, axisY2: { title: "Percent", suffix: "%", lineColor: "#C0504E", tickColor: "#C0504E", labelFontColor: "#C0504E" }, data: [{ type: "column", dataPoints: [ { label: "Strain", y: 104 }, { label: "Scratch", y: 42 }, { label: "Pinhole", y: 20 }, { label: "Crack", y: 10 }, { label: "Gap", y: 4 }, { label: "Others", y: 14 } ] }] } return ( <div> <CanvasJSChart options = {options} onRef={ref => this.chart = ref} /> {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/} </div> ); } } export default App;
You can change the color of Column or Line to make it visually distinct. Some other common customizations include dataPointWidth, markerType, markerColor etc.