Home forums Using CanvasJS stacked Bar chart

This topic contains 2 replies, has 2 voices, and was last updated by  Sravanthi B 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #27224

    How can i create a stacked Bar chart with dynamic labels data?

    The number of bananas in below example is 50 ,but that banans count is displaing in Apples Column,
    charts generated will depend upon the dynamically generated lables value in a JSON object.
    I have included an example of how my data will look below:

    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Understanding Labels”
    },
    axisY: {
    labelFontSize: 20,
    labelFontColor: “dimGrey”
    },
    axisX: {
    labelAngle: -30
    },
    data: [
    {
    type: “stackedBar”,
    dataPoints: [
    { y: 10, label: “Apples” },
    { y: 15, label: “Mangos” },
    { y: 25, label: “Oranges” },
    { y: 30, label: “Grapes” }
    ]
    },
    {
    type: “stackedBar”,
    dataPoints: [

    { y: 50, label: “Bananas” }
    ]
    },
    {
    type: “stackedBar”,
    dataPoints: [
    { y: 15, label: “Apples” },
    { y: 20, label: “Mangos” },
    { y: 35, label: “Oranges” },
    { y: 40, label: “Grapes” }

    ]
    }
    ]
    });

    chart.render();
    }

    #27242

    @sravanthi-b,

    Stacked Bar Charts are plotted when multiple Bar Charts with aligned x values are plotted on same axis. Adding x-values to the dataPoints should work fine in your case.

    —-
    Manoj Mohan
    Team CanvasJS

    #27278

    Thank you

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.