HTML5 & JS Stacked Column Charts

Comments 27

1. how to change size of chart…..whwt should be modified in js

2. how can I start the second stackedColumn chart from below (0) not from above (where first stackedColumn finish), like 2 column chart overlapped each other with one of them a little bit transparent color. So, both will be visible.

   • sourav,

     You can do the same by using one “column” chart and one “stackedColumn” chart instead of setting both to stackedColumn.

     • but what if i have 4 values i want ‘stacked’ but not totaled

       • Paul,

         Are you referring to multi-series column charts?? If not, can you please describe the requirement in detail. Any link depicting the same would be useful.

     • I can’t get this to work, could you please give an example of how this would work? Thanks!

3. How can you we use multi-series stacked charts?

4. I am created a stacked column chart. It’s completely valid for some columns to have zero as their value. When I use “0” as a column value an error is given instead of text shown above the column. I want “0” to appear. Is this possible?

   I was able to use “” instead of a value and remove the error. However, if the last column piece has no value the sum of the other pieces is not shown. This work around was unsuccessful. Allowing zero as a valid value would make more sense.

   Is there a way to allow valid values of zero for columns?

5. Is it possible to plot date/time values on the x axis and y axis simultaneously? I am looking to create a graph which separates individual days into multiple bar segments which will represent how long an event occurred for on a given day.

   • Y Axis doesn’t support DateTime values yet – we are planning to support in future versions though. For now you can workaround this issue by using labelFormatter as shown in below examples

     http://jsfiddle.net/canvasjs/7dqw4p3L/1/

     http://jsfiddle.net/canvasjs/5druj8br/

6. I need to either reverse the order of the items in the legend or reverse the order that the series are stacked on the chart. Currently when I show all the series in the legend the order that they read from top to bottom is the order that they are stacked from bottom to top on the chart when it is drawn. Is there a way to do this? The client wants to be able to see the top item in the legend and know that it is also the top item in the stacked columns.

   • Jerrid,

     By setting legend’s reversed property to true you can show all the legend in reverse order.

7. Is there a way to show a sum total of all columns? To expand up on that, is there a way to have the totals of each colored area show in those areas without mousing over?

   • I think you are looking for indexLabels. Here is one more example with stacked column 100.

8. Is there a way to sort the data in each stacked column, ascending, or descending? Ideally, I’d would like each stacked column in the chart to be organized by value internally.

   • I would like to be able to do this as well. I have a shared tooltip on a multiple dataSeries rangeArea chart, and for any given datapoint the values and hence the sort order should be different. I thought that the control of the order was based on the stacking of the dataSeries in the chart setup, but then I viewed the same chart in Chrome (all my testing had been in Firefox) and now the tooltip order is incorrect.

     I was thinking about modifying my already complex tooltip contentFormatter by building an array or something so that it could be sorted.

     Has anyone come up with a fix for this?

     • Melony,
       We were unable to reproduce your issue. Can you kindly create a fiddle, so that we can understand your issue and help you out.

       • It took me a little while to create a kind of encapsulated version of my application, but I finally managed it. Here’s the fiddle: https://jsfiddle.net/melonyjr/eyok3rby/1/.

         So, the shared tooltip works as expected in Firefox (and IE even!), but not in Chrome. In Chrome there are two entries that are always out of order (Ashmore Tongue and Grayslake Peat). If I could sort the values in the toolTip on y[1], then all would be solved, I think.

         Thanks for having a look at this!

         • Melony,

           Thanks for reporting this issue, we will fix and get back to you as soon as possible.

9. Is it possible to start the chart from a point other than zero? My specific example is a borehole in the ground. I want the top of the chart to be at the ground elevation (say 150), and then the stacked column to move down from there. I’ve used negative values for the Y values to make the chart go negative, but it starts from zero. I tried to use the range chart to do this as well, but then I’d need a stackedRangeColumn chart, and you don’t have that option. Any help appreciated.

   • Steve,

     You can invert axis-Y and handle tooltip content to achieve this. Here is an example.

10. I would like to move a stack from one column say Jan 2015 and would like to see the effect of the change on the system. Graph needs to have the capability to change the source code at a point

    • Are you looking for this example. If not any live example or pictorial representation will help us to understand your requirement.

11. i want to pass variables from php to this javascript file, then draw the stacked column chart. How can I achieve this? Using JSON or ?

    • Here is an example to render chart using json data. You can follow the same with chart type stackedColumn.

12. Switching between the types “stackedArea” and “stackedColumn” works fine as long as no negative numbers are used. Is there a way to stack the values in “stackedColumn” the same way as “stackedArea” does?

    Setting the value ‘y: 135305 , label: “USA”‘ of the 1st example to ‘y: -135305 , label: “USA”‘ shows a graph which a “cumulative total” of about 250.000 (+-120.000). Setting then both data types to “stackedArea” will show a “cumulative total” of -23967.

    • Gregory,

      Sorry as of now it is not possible. As a workaround you can try with, rangeColumn chart in addition to column chart, but you have to add the data yourself. Here is an example.