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 the series type as Bar and inject the BarSeries module using the 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 the total sum of the points. To render a stacked bar series, use the series type as StackingBar and inject the StackingBarSeries module using the 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 the series type as StackingBar100 and inject the StackingBarSeries module using the Chart.Inject(StackingBarSeries) method.
Chart.Inject(StackingBarSeries);
let chart: Chart = new Chart({
series: [
{
type: ‘StackingBar100’,
}
],
});
chart.appendTo('#container');
