CODEWITHSUNDEEP
javascriptchart.js
pDEV
pDEV

Reputation: 71

How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?

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.

enter image description here

Upvotes: 0

Views: 358

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31331

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: enter image description here

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

Upvotes: 1

Related Questions