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
Stacked Bar Chart With Additional Customization
Integrations:
Comments 9
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
want to give dynamic values like y:71 instead of 71 from DB
ha
Is it possible to use external file for the Data section?
Amir,
Yes it is possible to use external file for the Data section. Please refer this link.
Thanks I’ll use that.
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.
Richard,
As of now it is not possible to combine bar and line charts. Instead you can consider combining stackedColumn and line Chart.
Hi,
Is it possible to remove the space below of this graph (http://jsfiddle.net/cw93jqo3/1/), and how to display last cutting off horizontal label fully?
Anish,
you can set viewportMaximum of axisY2 and viewportMinimum of axisX to solve both of your problems. Here is your updated fiddle