Labels of jQuery Stacked Bar Charts

[jackMI]

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);
}

[Shashi Ranjan]

@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

[jackMI]

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

[jackMI]

thank in advance

[Shashi Ranjan]

@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

[jackMI]

It works very well !
thk a lot