如何使用 Chart.js 在 X 轴上显示带有网格线的刻度线和标签？

Question

Thank you for paying attention to this question.

I'd like to add the ticks and 3 labels with the gridline like the picture but I couldn't find the best solution to make the X-axis like the picture. Hope someone helps me.

Answer 1

use this for your labels array:

labels: [["jan", 20], "", "", "", "", "", ["jul", 20], "", "", "", "", "", ["jan", 21]],

and this to your options object:

options: {
    scales: {
        xAxes: [{
            ticks: {
               callback: (label) => (label === "" ? null : label)
          }
      }]
    }
  }

will get the following result:

Since the tick marks are getting generated from the grid lines they dissapear too, dont know how you can fix that