HTML5 & JS Stacked Bar Charts

Stacked Bar Charts are plotted when multiple Bar Charts with aligned x values are plotted on same axis. Multiple sets of data are represented by one Bar. Contribution of each value is displayed in different colors and the total length of bar is Cumulative Sum of all the data Elements. Each dataSeries should contain type as stackedBar.

In Stacked Bar axisX is the Vertical Axis and axisY is the Horizontal Axis.

Cannot be combined with: Any chart type except Bar and Stacked Bar charts.

Stacked Bar Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries bevelEnabled Boolean false true,false
dataSeries fillOpacity Number 1 .2,.4,1 etc
dataSeries/ dataPoint indexLabelPlacement String “inside” “inside”,”outside”
dataSeries/ dataPoint indexLabelOrientation String “horizontal” “horizontal”,”vertical”

Basic Stacked Bar Chart

Try Editing The Code

Stacked Bar Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

9 Comments

  3. Richard says:

    Is is possible to add a line (or several lines) to stacked bar charts? We have charts showing the total number of hours spent on cases by developers and another bar (per team) to show the average. I’d like the averages to display as lines on each of the other bars, not as a separate bar.

    • Sunil Urs says:

      Richard,

      As of now it is not possible to combine bar and line charts. Instead you can consider combining stackedColumn and line Chart.

If you have any questions, please feel free to ask in our forums. Ask Question