Pareto charts display both a bar and a line graph, where individual values are represented in descending order by bars, and the cumulative total is represented by the line. The left vertical axis is the frequency of occurrence, but it can alternatively represent cost or another important unit of measure. The right vertical axis is the cumulative percentage of the total number of occurrences, total cost, or total of the particular unit of measure. ZingChart allows for multiple styling options of JavaScript pareto charts.
{ "type": "pareto", "series": [ { "values": [4642, 4345, 2350, 1251] } ] }
Create a "series" object array of length 1. Within the object, place a "values" array of numbers. ZingChart will automatically calculate the percentage values for the line plot from this array.
{ "type":"pareto", "series":[ { "values":[464200,434500,235000,125100] } ] }
Pareto charts include a number of unique chart-specific properties that allow you to manipulate the appearance and behaviors of your HTML5 pareto chart.
The “line-plot” object sets the definition for the auto-generated line plot.
{ "type":"pareto", "options":{ "line-plot":{ "line-color":"#f00", "line-width":4 } }, "series": [ { "values": [4642, 4345, 2350, 1251] } ] }
The “scale-y-2” object sets the definition for the second Y scale (with percentages as values), the one associated with the auto-generated line plot.
{ "type":"pareto", "options":{ "scale-y-2":{ "line-color":"red", "label":{ "text":"Percentage", "font-color":"red" }, "tick":{ "line-color":"red" }, "item":{ "color":"red" } } }, "plotarea":{ "margin-right":"10%" }, "series": [ { "values": [4642, 4345, 2350, 1251] } ] }
Got a question about how pareto charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.