Home forums Using CanvasJS Labels of jQuery Stacked Bar Charts

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #29123

    Hi,i.m trying to use bar Chart, but i’m not able to show all lables on left side of chart
    this is my code.
    could someone help me ?
    window.onload = function () {

    var options = {
    animationEnabled: true,
    theme: “light1”,
    title:{
    text: “Situazione ore annua”
    },
    axisY2:{
    valueFormatString: “###0”,
    labelAngle: -90 ,
    lineThickness: 1
    },
    toolTip: {
    shared: true
    },
    legend:{
    verticalAlign: “top”,
    horizontalAlign: “center”
    },
    data: [
    { type: “stackedBar”, indexLabelPlacement: “outside”, name: “AM Alberto”, showInLegend: “true”, axisYType: “secondary”, yValueFormatString: “###0”,color: “#3399CC”,
    dataPoints: [{ y: 3, label: “wwcolaus-2020”},{ y: 0, label: “bonaparte-2020”},{ y: 2, label: “XXX-2020”},{ y: 0, label: “xurera-2020”},{ y: 0, label: “eeenv-2020”},{ y: 31, label: “eeen-2020”},{ y: 18, label: “xxxcargo-2020”},{ y: 0, label: “_”},{ y: 31, label: “wwcolaus-2019”},{ y: 0, label: “bonaparte-2019”},{ y: 0, label: “XXX-2019”},{ y: 0, label: “xurera-2019”},{ y: 0, label: “eeenv-2019”},{ y: 126, label: “eeen-2019”},{ y: 9, label: “xxxcargo-2019”},{ y: 0, label: “_”},{ y: 0, label: “wwcolaus-2018”},{ y: 0, label: “bonaparte-2018”},{ y: 0, label: “XXX-2018”},{ y: 0, label: “xurera-2018”},{ y: 6, label: “eeenv-2018”},{ y: 117, label: “eeen-2018”},{ y: 12, label: “xxxcargo-2018”},]},
    { type: “stackedBar”, indexLabelPlacement: “outside”, name: “DM Davide”, showInLegend: “true”, axisYType: “secondary”, yValueFormatString: “###0”,color: “#5ae2d3”,
    dataPoints: [{ y: 0, label: “wwcolaus-2020”},{ y: 14, label: “bonaparte-2020”},{ y: 32, label: “XXX-2020”},{ y: 1, label: “xurera-2020”},{ y: 0, label: “eeenv-2020”},{ y: 5, label: “eeen-2020”},{ y: 1, label: “xxxcargo-2020”},{ y: 0, label: “_”},{ y: 0, label: “wwcolaus-2019”},{ y: 13, label: “bonaparte-2019”},{ y: 76, label: “XXX-2019”},{ y: 0, label: “xurera-2019”},{ y: 0, label: “eeenv-2019”},{ y: 20, label: “eeen-2019”},{ y: 1, label: “xxxcargo-2019”},{ y: 0, label: “_”},{ y: 44, label: “wwcolaus-2018”},{ y: 0, label: “bonaparte-2018”},{ y: 18, label: “XXX-2018”},{ y: 0, label: “xurera-2018”},{ y: 0, label: “eeenv-2018”},{ y: 44, label: “eeen-2018”},{ y: 1, label: “xxxcargo-2018”},]},
    { type: “stackedBar”, indexLabelPlacement: “outside”, name: “GP Giacomo”, showInLegend: “true”, axisYType: “secondary”, yValueFormatString: “###0”,color: “#8cdba6”,
    dataPoints: [{ y: 0, label: “wwcolaus-2020”},{ y: 26, label: “bonaparte-2020”},{ y: 9, label: “XXX-2020”},{ y: 1, label: “xurera-2020”},{ y: 0, label: “eeenv-2020”},{ y: 33, label: “eeen-2020”},{ y: 0, label: “xxxcargo-2020”},{ y: 0, label: “_”},{ y: 0, label: “wwcolaus-2019”},{ y: 18, label: “bonaparte-2019”},{ y: 14, label: “XXX-2019”},{ y: 0, label: “xurera-2019”},{ y: 0, label: “eeenv-2019”},{ y: 106, label: “eeen-2019”},{ y: 0, label: “xxxcargo-2019”},{ y: 0, label: “_”},{ y: 27, label: “wwcolaus-2018”},{ y: 9, label: “bonaparte-2018”},{ y: 0, label: “XXX-2018”},{ y: 4, label: “xurera-2018”},{ y: 0, label: “eeenv-2018”},{ y: 83, label: “eeen-2018”},{ y: 0, label: “xxxcargo-2018”},]},

    { type: “stackedBar”, indexLabelPlacement: “outside”, name: “PT Paola”, showInLegend: “true”, axisYType: “secondary”, yValueFormatString: “###0”,color: “#adf486”, indexLabel: “#total”, indexLabelFontSize: 15,
    dataPoints: [{ y: 7, label: “wwcolaus-2020”},{ y: 26, label: “bonaparte-2020”},{ y: 0, label: “XXX-2020”},{ y: 17, label: “xurera-2020”},{ y: 0, label: “eeenv-2020”},{ y: 25, label: “eeen-2020”},{ y: 0, label: “xxxcargo-2020”},{ y: 0, label: “_”},{ y: 66, label: “wwcolaus-2019”},{ y: 9, label: “bonaparte-2019”},{ y: 0, label: “XXX-2019”},{ y: 12, label: “xurera-2019”},{ y: 0, label: “eeenv-2019”},{ y: 80, label: “eeen-2019”},{ y: 0, label: “xxxcargo-2019”},{ y: 0, label: “_”},{ y: 32, label: “wwcolaus-2018”},{ y: 10, label: “bonaparte-2018”},{ y: 0, label: “XXX-2018”},{ y: 27, label: “xurera-2018”},{ y: 0, label: “eeenv-2018”},{ y: 104, label: “eeen-2018”},{ y: 0, label: “xxxcargo-2018”},]} ]
    };
    $(“#chartContainerAnno”).CanvasJSChart(options);
    }

    #29129

    @jackmi

    Labels are skipped to avoid overlapping. However, to show all the labels, you can set the interval to 1 in axisX (vertical in case of the bar chart).

    If this doesn’t fulfill your requirement, kindly create a JSFiddle reproducing the issue you are facing and share it with us along with the sample data and a brief description of your requirement so that we can look into the code, understand the scenario better and help you out?


    Shashi Ranjan
    Team CanvasJS

    #29157

    Hi i tryed but it doesn’t work
    this is my code
    window.onload = function () {

    var options = {
    animationEnabled: true,
    theme: “light2”,
    title:{
    text: “Situazuione ore annua”
    },
    axisY2:{
    prefix: “”,
    lineThickness: 0
    },
    toolTip: {
    shared: true
    },
    legend:{
    verticalAlign: “top”,
    horizontalAlign: “center”
    },
    dataPointWidth: 10,
    data: [
    { type: “stackedBar”, name: “Angelo AM”, showInLegend: “true”, axisYType: “secondary”, color: “#3399CC”,
    dataPoints: [
    { y: 3, label: “North” } ,
    { y: 0, label: “Napoli” } ,
    { y: 2, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 31, label: “ecolo” },
    { y: 18, label: “alixxxxx” },
    { y: 0, label: “2020 *****” } ,

    { y: 31, label: “North” } ,
    { y: 0, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 126, label: “ecolo” },
    { y: 9, label: “alixxxxx” },
    { y: 0, label: “2019 **********” } ,

    { y: 0, label: “North” } ,
    { y: 0, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 6, label: “Edile” },
    { y: 31, label: “ecolo” },
    { y: 12, label: “alixxxxx” },
    { y: 0, label: “2018 **********” }

    ]
    },
    { type: “stackedBar”, name: “Dalberto DM”, showInLegend: “true”, axisYType: “secondary”, color: “#5ae2d3”,
    dataPoints: [
    { y: 0, label: “North” } ,
    { y: 14, label: “Napoli” } ,
    { y: 32, label: “MMM” },
    { y: 1, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 5, label: “ecolo” },
    { y: 1, label: “alixxxxx” },
    { y: 0, label: “2020” } ,

    { y: 0, label: “North” } ,
    { y: 13, label: “Napoli” } ,
    { y: 76, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 20, label: “ecolo” },
    { y: 1, label: “alixxxxx” },
    { y: 0, label: “2019” } ,

    { y: 44, label: “North” } ,
    { y: 0, label: “Napoli” } ,
    { y: 18, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 0, label: “ecolo” },
    { y: 1, label: “alixxxxx” },
    { y: 0, label: “2018” }

    ]
    },
    { type: “stackedBar”, name: “Gioppino GP”, showInLegend: “true”, axisYType: “secondary”, color: “#8cdba6”,
    dataPoints: [
    { y: 0, label: “North” } ,
    { y: 26, label: “Napoli” } ,
    { y: 9, label: “MMM” },
    { y: 1, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 33, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2020” } ,

    { y: 0, label: “North” } ,
    { y: 18, label: “Napoli” } ,
    { y: 14, label: “MMM” },
    { y: 0, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 106, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2019” } ,

    { y: 27, label: “North” } ,
    { y: 9, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 4, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 33, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2018” }

    ]
    },
    { type: “stackedBar”, name: “Paperino PT”, showInLegend: “true”, axisYType: “secondary”, color: “#adf486”,
    dataPoints: [
    { y: 7, label: “North” } ,
    { y: 26, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 17, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 25, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2020” } ,

    { y: 66, label: “North” } ,
    { y: 9, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 12, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 80, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2019” } ,

    { y: 32, label: “North” } ,
    { y: 10, label: “Napoli” } ,
    { y: 0, label: “MMM” },
    { y: 27, label: “Fucile” },
    { y: 0, label: “Edile” },
    { y: 25, label: “ecolo” },
    { y: 0, label: “alixxxxx” },
    { y: 0, label: “2018” }

    ]
    }
    ]
    };
    $(“#chartContainer”).CanvasJSChart(options);

    }
    The problem are the labels on the left side

    #29158

    thank in advance

    #29202

    @jackmi,

    In the code snippet shared above, you are not setting the axisX interval as 1. Please refer to the code snippet below for setting the axisX interval as 1.

    axisX: {
       interval: 1
    }

    If you are still facing the issue, kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you out?

    From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

    Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code on JSFiddle to fix the issue right away.


    Shashi Ranjan
    Team CanvasJS

    #29218

    It works very well !
    thk a lot

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

You must be logged in to reply to this topic.