How can I get multiple charts(bar and line) with ng2-charts?

[tientm96]

I have bar chart and I want to draw average line on this bar chart.

My solution: In datasets, I add element with type as 'line':

https://stackblitz.com/edit/ng2-charts-bar-template?file=src%2Fapp%2Fapp.component.ts

public barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; public barChartType: ChartType = 'bar'; public barChartLegend = true; public barChartPlugins = [];

public barChartData: ChartDataSets[] = [ { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }, { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }, { data: [48, 48, 48, 48, 48, 48, 48], label: 'Series C', type: 'line' } ]; The line does not start at the beginning of the y axis, it is not connected to that y axis. (I understand because it's in the bar chart)

• However I still want it to be displayed as below, it will be started at the beginning of the y axis:

=> My desired results:

Please help me find a way for this. Thanks very much!

[picolo74]

You can force the line to start in the middle of the bar, but it can not start at the beggining :

public barChartOptions: ChartOptions = { responsive: true, scales: { xAxes: [{ stacked: true, ticks: { beginAtZero: true } } ] } };

see : https://www.chartjs.org/docs/latest/charts/mixed.html

[tientm96]

I have also asked question on Stack Overfolow and got this response. This response is right for me.

https://stackoverflow.com/questions/57886007/how-can-i-get-multiple-chartsbar-and-line-with-ng2-charts