0

I am building a line chart in chartjs, similar to thisenter image description here

Here is what I have achieved:enter image description here

How can I make the zero on y-axis on the same level as the labels on the x axis.

I have tried almost everything from the chartjs documentation, but nothing seems to work

Codepen link

Here is my config object: 

var config = {
    type: 'line',
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: { display: false },
        scales: {
            xAxes: [{
                gridLines: {
        drawBorder: false,
                    color: "#EEEEEE",
                    beginAtZero: false,
                    zeroLineColor: 'transparent'
                },
                ticks: {
                    fontColor: "#9A9A9A",
                    fontStyle: '600',
                    fontSize: 15
                }
            }],
            yAxes: [
                {
                    gridLines: {
                        color: "#EEEEEE",
                        beginAtZero: false,
                        zeroLineColor: 'transparent',
                        drawBorder: false
                    },
                    ticks: {
                        max: 30,
                        min: 0,
                        stepSize: 5,
                        fontColor: "#9A9A9A",
                        fontStyle: '505',
                        fontSize: 14
                    }
                },
            ]
        }
    },
    data: {
        labels: ["", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
        datasets: [{
            data: [null, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
            showLine: true,
            lineTension: 0,
            fill: false,
            pointRadius: 4,
            borderWidth: 2,
            pointBackgroundColor: "#FFFFFF",
            backgroundColor: "transparent",
            borderColor: "#973490"
        }]
    }
};
pc.97
  • 153
  • 1
  • 4
  • 12

1 Answers1

0

The first chart is a timeseries chart. Is this what you’re trying to accomplish?

With the linear axis chart you could add [null, null, null] to your data array and have corresponding xaxis values. This would leave space on the end.

Alternatively using the offset property in options may help

Or add a margin to the chart

Jared Gibb
  • 47
  • 5