Index label Overlapping issue

[Sravanthi B]

Hi ,

IndexLabel is overlapping on stacked bar char.
Can anyone help me out of the below issue.

chart = new CanvasJS.Chart(‘chartContainer’,
{
title: {
text: ‘PAS Process TAT’,
fontColor: ‘#2C4B5D’
},
axisX: {
//valueFormatString: ‘MM/DD/YYYY’,
//labelFontWeight: ‘bold’
},

toolTip: {
shared: true
},
legend: {
horizontalAlign: ‘center’,
verticalAlign: ‘bottom’,
fontWeight: ‘bold’,
fontSize: 23,
fontColor: ‘#2C4B5D’

},
data: [
{
type: ‘stackedBar’,
name: ‘<=4Hrs’,
showInLegend: true,
color: ‘#77a033’, /*’#4978B1″*/
indexLabel: “<4:{y}”,
indexLabelFontSize: 15,
indexLabelFontColor: ‘black’,
indexLabelFontWeight: ‘bold’,
dataPoints: [
{ label: CanvasJS.formatDate(new Date(2020, 01, 1), “MMM DD YYYY”), y: 710 },
{ label: CanvasJS.formatDate(new Date(2020, 02, 1), “MMM DD YYYY”), y: 550}

]
},

{
type: ‘stackedBar’,
name: ‘>=4Hrs’,
showInLegend: true,
color: ‘#4978B1’,
indexLabel: “>4:{y}”,
indexLabelFontSize: 15,
indexLabelFontColor: ‘black’,
indexLabelFontWeight: ‘bold’,
dataPoints: [
{ label: CanvasJS.formatDate(new Date(2020, 01, 1), “MMM DD YYYY”), y: 50},
{ label: CanvasJS.formatDate(new Date(2020, 02, 1), “MMM DD YYYY”), y: 100}

]
},
{
type: ‘stackedBar’,
name: ‘>=10Hrs’,
showInLegend: true,
indexLabel: “>10:{y}”,
color: ‘#f79647’,
indexLabelFontSize: 15,
indexLabelFontColor: ‘black’,
indexLabelFontWeight: ‘bold’,
dataPoints: [
{ label: CanvasJS.formatDate(new Date(2020, 01, 1), “MMM DD YYYY”), y: 50},
{ label: CanvasJS.formatDate(new Date(2020, 02, 1), “MMM DD YYYY”), y: 100}

]
},
{
type: ‘stackedBar’,
name: ‘>=20Hrs’,
showInLegend: true,
indexLabel: “>20:{y}”,
color: ‘#c0504e’,
indexLabelFontSize: 15,
indexLabelFontColor: ‘black’,
indexLabelFontWeight: ‘bold’,
dataPoints: [
{ label: CanvasJS.formatDate(new Date(2020, 01, 1), “MMM DD YYYY”), y: 75},
{ label: CanvasJS.formatDate(new Date(2020, 02, 1), “MMM DD YYYY”), y:50}

]
}

]
});

chart.render();

[Manoj Mohan]

@sravanthi-b,

Index-labels overlap each other as there would be no space available when the datapoint values are small. It can be avoided to an extent by setting indexLabelFontSize to a smaller value.

—-
Manoj Mohan
Team CanvasJS

[Sravanthi B]

Hi ,
Thanks for the response.
Is there any option to not displaying index -labels only if the datapoint values are small?

Thanks,
Sravanthi B.

[Manoj Mohan]

Sravanthi B,

You can set the indexLabel to empty string(” “) for all the smaller dataPoint value.

—-
Manoj Mohan
Team CanvasJS