You must be logged in to post your query.
Home › Forums › Chart Support › Index label Overlapping issue
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();
@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
Hi , Thanks for the response. Is there any option to not displaying index -labels only if the datapoint values are small?
Thanks, Sravanthi B.
Sravanthi B,
You can set the indexLabel to empty string(” “) for all the smaller dataPoint value.
You must be logged in to reply to this topic. Login/Register