Overview – Stacked Charts

Stacked charts are Multi-Series charts which show two or more similar set of data together in a single chart. There are two variants of Stacked Charts

  1. Stacked Charts: dataPoints for each series are stacked one on top of the other. Stacked charts display the contribution of each individual series at any given point. Supported Stacked charts are stackedArea, stackedColumn, stackedBar.

  2. Stacked Chart 100: dataPoints for each series are stacked on top of each other, adding up to 100%. Each series represents its contribution to the total in percent. Supported Stacked 100 Percent Charts are stackedArea100, stackedColumn100, stackedBar100.

Pie charts and Doughnut charts cannot be combined with any other chart type.

Note
  • When plotting stacked charts, all dataSeries should be of same type.

Simple Stacked Chart

In Next Example, we will draw a simple stackedArea chart. Edit the code to draw “stackedColumn” and “stackedBar” chart.

Try Editing The Code

Stacked Chart 100 Percent

100 percent Stacked Charts are similar to above mentioned Stacked Chart except that they are rendered as a percent of 100.
Below is an example of “stackedColumn100”. Here, total length of each Column is 100 units, and length of each dataPoint is it’s contribution to total in percent.
Modify the chart to create, “stackedArea100”, “stackedBar100” charts.

Try Editing The Code

Finishing it up.

Using the above concepts, we can plot a complete chart as below.
Note that we have enabled Legend by setting showInLegend property to true. You’ll learn more about Legend in the upcoming sections.

Try Editing The Code

  Also See:    

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

13 Comments

  1. Joseph Poff says:

    I’m running into an issue with multiple timelines on a normal (non-100) stacked area line chart. Let’s say I have 2 lines. Line one has three datapoints at {x: “02/11/2015 08:00:00”, y: 10}, {x: “02/11/2015 08:00:05”, y: 20}, and {x: “02/11/2015 08:00:10”, y: 30}. Line two has two datapoints at {x: “02/11/2015 08:00:01”, y: 0} and {x: “02/11/2015 08:00:06”, y: 0}.

    In this example, not every line has the same x points. So, instead of showing a continually increasing line one (going from 10-30) and stacking over the zero values of line two, line one sinks to 0 at “08:00:01”, jumps to 20 at “08:00:05”, back to 0 at “08:00:06”, and finally to 30 at “08:00:10.”

    Am I missing a setting or is this working as intended?

    • Anjali says:

      Joseph,

      In case of stacked charts you need to have same x values in all the series or else it is not possible to stack them one above the other. Hence we consider x values present in all series combined because of which first series’ y value at x = “02/11/2015 08:00:01″ becomes zero and second series’ y value at x = “02/11/2015 08:00:00″ becomes zero so that the series can be stacked.

      Right way to use stacked charts is to have dataSeries with same x values.

      • Joseph Poff says:

        Thank you for the reply and I understand. However in this implementation, multiple servers are reporting information at a frequency of about 5 seconds. The timestamps will not be exactly the same. I do not want to falsify x values for a series. I will have to go in a different direction. Thank you again for your comments.

  6. vijay.verma@indiaresults.com says:

    i have two datas and showing two chart in one page but when i use it your code showing one chart proper but second not showing. any one can help me. my code is here.

    function func_make_chart(d1, d2){
    var option = {
    title:{
    text: “Sales Per Year”
    },
    axisY:{
    title:””
    },
    animationEnabled: true,
    width: 450,
    height: 200,
    data: [ {
    type: “stackedColumn”,
    toolTipContent: “{label}{name}: {y}”,
    name: “Before”,
    showInLegend: “true”,
    dataPoints: d1[0]
    }, {
    type: “stackedColumn”,
    toolTipContent: “{label}{name}: {z}”,
    name: “After”,
    showInLegend: “true”,
    dataPoints: d2[0]
    }],
    legend:{
    cursor:”pointer”,
    itemclick: function(e) {
    if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    }
    else
    {
    e.dataSeries.visible = true;
    }
    //chart.render();
    }
    }
    }
    return option;
    }

    function fn_get_sale_data(){
    var start_date = $(“#start_date”).val();
    var end_date = $(“#end_date”).val();
    var filterReport = $(“#filterReport”).val();
    var form_data ={start_date:start_date,end_date:end_date,filterReport:filterReport};
    $.ajax({
    url:”/modules/sales/ajax/ajax_sales_yearly_chart_report_table.php?filterReport=”+filterReport+””,
    type: “post”,
    data: form_data,
    success:function(result){
    var obj = JSON.parse(result);

    var d1 = obj[“aaData”][“total”][“tilldate”];
    var d2 = obj[‘aaData’][‘total’][‘complete’];

    if($(d1).is(‘object’)==false){ d1 = [d1]; }
    if($(d2).is(‘object’)==false){ d2 = [d2]; }

    var option1 = func_make_chart(d1,d2);

    var chart1 = new CanvasJS.Chart(‘sparkline_total_sales’,option1);
    chart1.render();

    var d3 = obj[“aaData”][“other”][“tilldate”];
    var d4 = obj[‘aaData’][‘other’][‘complete’];
    if($(d3).is(‘object’)==false){ d3 = [d3]; }
    if($(d4).is(‘object’)==false){ d4 = [d4]; }

    var option2 = func_make_chart(d3,d4);

    var chart2 = new CanvasJS.Chart(‘sparkline_123wc’,option2);
    chart2.render();

    }
    });
    }

    • Sanjoy says:

      Vijay,

      To debug, please check the types of assigned x and y values (it should not be string). And can you provide a sample JSON of your ajax request, so that we can look into it and help you out.

      • vijay verma says:

        ok, thanks sanjoy, i checked it and found that x values coming in string format. so it’s create problem. now solved. thank’s

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