Search code examples
canvasjs

CanvasJS labels are wrongly positioned

I'm using CanvasJS to display some weather data, but the labels seem to have the wrong position relative to their data point.

What is the cause of this?

enter image description here

This is my chart configuration:

animationEnabled: true,
        exportEnabled: true,
        title: {
            text: 'Pronóstico 8 Días',
        },
        axisX: {
            valueFormatString: 'DD MMM,YYYY',
            labelAngle: -30,
            labelPlacement: 'outside',
            labelTextAlign: 'left',
        },
        axisY: {
            title: 'Temperatura',
            suffix: ' °C',
            minimum: 18,
            maximum: 40,
            interval: 2,
        },
        data: [
            {
                name: 'Mínimas',
                type: 'line',
                yValueFormatString: '#0.## °C',
                showInLegend: true,
                indexLabelWrap: true,
                indexLabelMaxWidth: 80,
                dataPoints: min,
            },
            {
                name: 'Máximas',
                type: 'line',
                yValueFormatString: '#0.## °C',
                showInLegend: true,
                indexLabelWrap: true,
                indexLabelMaxWidth: 80,
                dataPoints: max,
            },
        ],
Solution

  • The issue was the dates were shifting because they included time, so I just turned into day/month/year only.