Multi series pareto chart

[lujakob]

Hi…

I would like to use CanvasJS charts. Is it possible to have a multi series pareto chart?

https://canvasjs.com/angular-charts/pareto-chart/

In need to display a dataset with pairs of columns and two lines.

A combination of

https://canvasjs.com/angular-charts/multi-series-column-chart/

and

https://canvasjs.com/angular-charts/multi-series-spline-chart/

[Thangaraj Raman]

@lujakob,

You can add another column dataseries to the chart, and apply the same logic as in the Angular Pareto Chart gallery example to create another line series.

Please take a look at this StackBlitz for a working example.

—
Thangaraj Raman
Team CanvasJS

[lujakob]

Thanks Thangaraj,

that’s already pretty close. But is it possible to adjust the x-position of the line dots for them to be horizontale aligned with the columns. As seen in your example it’s not possible to identify which line corresponds to which bar. So the dots of the first line should be centerd on the blue bar, the dots of the second line centerd on the red bar. Do you know what I mean?

[Thangaraj Raman]

@lujakob,

You can add an offset to the x-values in the line chart in order to align them to their respective columns as shown in the code snippet below:

dps1.push({label: chart.data[0].dataPoints[i].label, x: chart.data[0].dataPoints[i].x - 0.25, y: yPercent1});
dps2.push({label: chart.data[0].dataPoints[i].label, x: chart.data[0].dataPoints[i].x + 0.25, y: yPercent2});

Please check this updated StackBlitz for a working example.

—
Thangaraj Raman
Team CanvasJS

[lujakob]

This helped me immensly. Thanks a lot.

[lujakob]

Hi discovered a problem with your configuration. I have a simplified version in a Stackblitz fork. The changes I made was to not provide line chart data dynamically, but manually for simplicity. How the problem is, if I have a wide screen, the xAxis shows .5 labels, due to the fact that we remove or add to the values

https://stackblitz.com/edit/canvasjs-angular-multiseries-pareto-chart-16gskg?file=src%2Fapp%2Fapp.component.ts

If you pull the screen wide you see the xAxis labels “KW 3”, “KW 3.5”, “KW 4”, “KW 4.5”, but what I need is only whole numbers like “KW 3”, “KW 4”, “KW 5”,

I can make the line chart xAxis secondary and hide the secondary axis, but then the positioning of the column and line chart datapoints is not in sync anymore.

Do you have any ideas??

Thanks

[Thangaraj Raman]

@lujakob,

The interval at which axis labels are shown is auto-calculated based on the axis range. You can set the x-axis interval to 1 to show the x-axis labels at whole numbers.

Please check this updated StackBlitz for a working example of the same.

—
Thangaraj Raman
Team CanvasJS