CODEWITHSUNDEEP
angularng2-charts
IamGrooot
IamGrooot

Reputation: 1040

Lines between stacked columns in ng2-charts bar graph

I am working on ng2-charts stacked bar graph where I want to achieve separation between each series. Something similar to below images. Line or Background shade anything is fine.

enter image description here

I have implemented stacked bar charts and line charts separately. How can I achieve the lines/shades in stacked bar graph to differentiate the columns.

Stackblitz | Stacked bar graph

Stackblitz | Line Chart

Upvotes: 1

Views: 532

Answers (1)

Rohith
Rohith

Reputation: 81

You can add the line in the bar graph by passing the same data again with type: lineto instead of stack in your example.

Replace below code

public barChartData: ChartDataSets[] = [
  { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] , label: 'Series A', stack: 'a' },
  { data: [65, 59, 40, 81, 56, 55, 40, 54, 23, 36, 23, 44], label: 'Series B', stack: 'a' }
];

with this

 public barChartData: ChartDataSets[] = [
      { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] , label: 'Series A', stack: 'a' },
      { data: [35, 41, 60, 19, 44, 45, 60, 46, 77, 64, 77, 56] ,  type: 'line' }, // new line
      { data: [65, 59, 40, 81, 56, 55, 40, 54, 23, 36, 23, 44], label: 'Series B', stack: 'a' }
    ];

There may be better approach than this instead of duplicating the data. But I am not aware of any

Upvotes: 1

Related Questions