With Chart.js we can create a Pareto Chart. The Pareto Chart is well known due to the 80/20 rule. It is stated that 80% of all results derives from 20% of the cause.
Commonly in manufacturing this is being use to measure production mistakes. It tracks each item and analyzes the percentage of mistakes that are made per step.
How to make a Pareto Chart in Chart js
This video will show you exactly how to make a Pareto Chart in Chart js. It will start with a default code which you can find on the Chart.js Getting Started Page.
Pareto Chart is a bar line combo chart
While the Pareto Chart is bar line combo chart it does has some modifications. We are required to show the bar values in absolutes. While the line which is applied to the second Y-axis, measures each step and is displayed in cumulative percentages. In other words the percentage value is added up with each step.
This requires a more complex level of array manipulation and show the scale in percentage values on the right side. This must be fully automated so the values will recalculate if the data is changing.
This requires a more complex level of array manipulation and show the scale in percentage values on the right side. This must be fully automated so the values will recalculate if the data is changing.
Let’s break down all the essential parts of a Chart JS Pareto Chart.
We will have a mixed chart which consist of a line chart and bar chart combination. Chart.js allow us to create combo charts. Secondly, we need to make sure the line will be visible and draw on top the bar chart.
Chart JS Mixed Chart
To create a mixed chart or oftenly referred to a combo bar line chart in Chart js. This video covers it nicely and also shows how to keep the line always on top of the bars.
Chart JS Second Y Axis
Chart.js allows you at add a second y axis or y scale. We will need this because we will conver the second y axis into a percentage scale which is devoted to the line chart. The line chart will use the values from the bars or Pareto Chart and convert it into percentages. This video explains the process for how to add the second y axis specifically:
Add Annotations in Chart JS
A special add on option is annotations in Chart JS. With annotation you could add lines to highlight specific parts of the Pareto Chart in Chart.js. The upper video does not truly show you how to do this but this page shows you how to add annotation lines or often referred to as arbitrary lines in Chart.js.
This page covers it in depth: https://www.chartjs3.com/blog/2022/03/07/how-to-add-custom-annotation-line-on-hover-in-chart-js/