What are different types of Bar Chart?
Types of bar chart
JavaScript Bar Charts are among the most common chart types that are used to compare frequency, count, total, or average of data in different categories with a horizontal bar. They are ideal for showing variations in the value of an item over time.
Default bar chart
To render a bar series, use series type as Bar and inject BarSeries module using Chart.Inject(BarSeries) method.
Chart.Inject(BarSeries); let chart: Chart = new Chart({ series: [ { type: 'Bar', } ], }); chart.appendTo('#container'); |
Demo: Bar chart
Stacked bar chart
JavaScript Stacked bar charts are charts with Y values stacked over one another in the series order. Shows the relation between individual values to total sum of the points.To render a stacked bar series, use series type as StackingBar and inject StackingBarSeries module using Chart.Inject(StackingBarSeries) method.
Chart.Inject(StackingBarSeries); let chart: Chart = new Chart({ series: [ { type: ‘StackingBar’, } ], }); chart.appendTo('#container'); |
Demo: Stacked bar chart
100% stacked bar chart
JavaScript 100% stacked bar chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100. To render a 100% stacked bar series, use series type as StackingBar100 and inject StackingBarSeries module using Chart.Inject(StackingBarSeries) method.
Chart.Inject(StackingBarSeries); let chart: Chart = new Chart({ series: [ { type: ‘StackingBar100’, } ], }); chart.appendTo('#container'); |
Demo: 100% stacked bar chart
