Menu
I have gone through the documents of ng2-charts but I couldn't find anything like Stacked Bar. Is there is any other way to achieve Stacked Bar chart in ng2-charts? Please help me out
972
asked Mar 19 '19 05:03
Bar Chart Example Using ng2-charts A bar chart is a popular chart option to create graphical representation of the data.You can represent data in rectangular bars displayed values that are proportionate to the heights or length of the values defined. Set up Angular Project Install and setup Angular project by running the following command.
The stacked bar chart (aka stacked bar graph) extends the standard bar chart from looking at numeric values across one categorical variable to two. Each bar in a standard bar chart is divided into a number of sub-bars stacked end to end, each one corresponding to a level of the second categorical variable.
ng2-chart Events There are two type events available into ng2-chart libs, You can catch click and hover events of any chart. chartClick: This event triggered, when user has been click on a chart.This method returns information regarding active points and labels. chartHover: This event triggered, when mousemove (hover) on a chart has occurred.
When there is only one bar to be plotted, a pie chart might be considered as an alternative to the stacked bar chart. However, you should try not to use a pie chart when you want to compare two or more primary groups, as is normally the case with a stacked bar chart.
That's definitely supported, it is documented in the chart.js documentation. You simply need to define which datasets are stacked together using the stack property on the datasets objects:
public barChartData: ChartDataSets[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: 'a' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: 'a' }
];
See this stackblitz for example.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
