I am making a line chart in chart.js, and am having an issue where I am trying to plot point data on the line but it is ignoring the x values I am giving, and instead putting them on the first available label.

this.myLineChart = new Chart(this.ctx, {
    type: 'line',
    data: {
        labels: [0,2,4,6,8,10],
        datasets: [{
            label: 'mylabel1',
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [{
                x: 2.5,
                y: 85
            }, {
                x: 3.5,
                y: 85
            }]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'mytitle1'
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 70,
                    suggestedMax: 100
                }
            }]
        }
    }
});

The result I get is this:

But instead I would like this line to be at the x values 2.5 and 3.5, so that it lies in between the 2 and 4 labels.

What should I change in the code to make it behave as I want?

I am making a line chart in chart.js, and am having an issue where I am trying to plot point data on the line but it is ignoring the x values I am giving, and instead putting them on the first available label.

this.myLineChart = new Chart(this.ctx, {
    type: 'line',
    data: {
        labels: [0,2,4,6,8,10],
        datasets: [{
            label: 'mylabel1',
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [{
                x: 2.5,
                y: 85
            }, {
                x: 3.5,
                y: 85
            }]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'mytitle1'
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    suggestedMin: 70,
                    suggestedMax: 100
                }
            }]
        }
    }
});

The result I get is this:

But instead I would like this line to be at the x values 2.5 and 3.5, so that it lies in between the 2 and 4 labels.

What should I change in the code to make it behave as I want?

• javascript
• chart.js

1 Answer 1

In that case, you don't need to use labels array. Instead set x-axis' type to linear and minimum and maximum value for x-axis' ticks (perhaps stepSize as well) in your chart options, like so :

xAxes: [{
   type: 'linear',
   ticks: {
      suggestedMin: 0,
      suggestedMax: 10,
      stepSize: 2
   }
}]

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

myLineChart = new Chart(ctx, {
   type: 'line',
   data: {
      datasets: [{
         label: 'mylabel1',
         fill: false,
         backgroundColor: 'blue',
         borderColor: 'blue',
         data: [{
            x: 2.5,
            y: 85
         }, {
            x: 3.5,
            y: 85
         }]
      }]
   },
   options: {
      title: {
         display: true,
         text: 'mytitle1'
      },
      scales: {
         xAxes: [{
            type: 'linear',
            ticks: {
               suggestedMin: 0,
               suggestedMax: 10,
               stepSize: 2 //interval between ticks
            }
         }],
         yAxes: [{
            display: true,
            ticks: {
               suggestedMin: 70,
               suggestedMax: 100
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>