1

Does anyone know how to apply different styles to the elements present inside the array which is in labels array in chart.js.See it below to take a look at what I meant.

I made chart where see the labels are shown on two lines 1.Temperature 2.Time

enter image description here

But I want labels to look like this:

enter image description here

How should I style the labels?

const data = {
  labels: [
    ['21°', '10am'],
    ['21°', '10am'],
    ['21°', '10am'],
    ['21°', '10am'],
    ['21°', '10am'],
    ['21°', '10am'],
  ],
  datasets: [{
    data: [21, 20, 3, 3, 3, 21],
  }, ],
};
const options = {
  xAxes: [{
    gridLines: {
      drawBorder: false,
      lineWidth: 1.8,
      zeroLineWidth: 1.8,
      zeroLineColor: 'rgba(0,0,0,.3)',
      color: 'rgba(0,0,0,.3)',
    },
    ticks: {
      fontColor: 'black',
      fontSize: 15,
      padding: 7,
    },
    scaleLabel: {
      fontColor: 'rgb(0,0,0)',
    },
  }, ],
}
uminder
  • 23,831
  • 5
  • 37
  • 72
Shardul Pathak
  • 55
  • 1
  • 6
  • This answer may give you a hint on how to solve your problem.: https://stackoverflow.com/a/61974056/2358409 – uminder Feb 14 '21 at 10:02
  • can you tell how to use these different plugins for different cases in chart.js? where did you learn to execute these plugins. – Shardul Pathak Apr 08 '21 at 10:26

0 Answers0