Home forums Chart Support Index label Overlapping issue

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #28475

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

    #28508

    @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

    #28510

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

    Thanks,
    Sravanthi B.

    #28533

    Sravanthi B,

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

    —-
    Manoj Mohan
    Team CanvasJS

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

You must be logged in to reply to this topic.