Search code examples
chart.jsvue-chartjs

Chart.js plot not aligned with xAxis labels

I have the following Scatter plot chart created with Chart.js and for some reason, the green dots are not aligned with the xAxis labels. Note that I am doing this in a Vue.js app using vue-chart.js but I don't think this is the reason. Any idea of how I could align plots and xAxis labels?

enter image description here

data: {
  labels: this.sessionLabels, // Example: ["2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T13:57:43", "2020-02-07T16:42:39", "2020-02-07T16:42:39"...]
  datasets: [
    {
      label: "Session",
      backgroundColor: "#42b983",
      data: this.sessions // Example: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}, ...]
    }
  ]
},
options: {
  title: {
    display: true,
    text: "Sessions executed over the last 7 days",
    fontColor: "#ffffff",
    fontSize: "14",
    fontStyle: "normal"
  },
  legend: {
    display: false
  },
  scales: {
    xAxes: [
      {
        ticks: {
          callback: function(value, index, values) {
            return this.sessionLabelsAlias[index];
          }.bind(this)
        }
      }
    ],
    yAxes: [
      {
        ticks: {
          max: 100,
          min: 0,
          stepSize: 10
        }
      }
    ]
  }
}
Solution

  • The main problems is that your sessionLabels contains identical values.

    Also when explicitly defining labels, your data should simply be an array of values, each one corresponding to the label at the same position.

    [0, 0, 0, 0, 0 ...]