HTML5 & JS Stacked Bar 100 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. Total length of each bar is 100 units, and length of each value is its contribution to total in percent. Each dataSeries should contain type as stackedBar100.

In Stacked Bar 100, 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 100 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 100 Chart

Try Editing The Code

Stacked Bar 100 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

19 Comments

    • Anjali says:

      chamith,

      When number of columns increase, chart automatically skips some of the labels to avoid overlapping. But you can force it to show all labels by setting interval property of axisX to 1.

  6. Memorymantra says:

    Hi Geeks !!
    I have one query in stacked bar graph. How can I create a stacked bar graph with n labels and each label has m number of fields in which many field will repeat. Its a kind of time based graph.
    color of same data should be same and predefined.
    example—
    label data
    AVB0 A B C A C D A
    AVB1 B A D C A B A

    color of all A should be same and similar pattern must follow for others.

      • Memorymantra says:

        Hi
        Some clarification–
        Suppose there are n resources which are being used over a period of 24hours.
        R1 —-> U F NA FA U F U F F so on
        R2—–> U U F NA F F NA FA … so on

        where—– F= resource was free, U=resource was being used, NA= Not available, FA= Faulty resource
        may I draw a bar graph in above case conditions are that colors of all F are same in every resource and similar pattern for others.

        • shailabhshailes says:

          In this case you are trying to change the color of bars/dataPoints color property of dataPoint. Also you can change the color of indexLabel, by using indexLabelFontColor property.
          If this not you are looking for, then please make a new threat in the forum with pictorial representation.

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