Im working on displaying radar chart. I need to apply 2 color in each point labels. A image attached below. For example if first label ‘Eating 65 / 28’ then 65 is in red abd 28 in blue.

I have applied html style on it something like Eating <span style="color:red;font-weight:bold;">65</span> <span style="color:blue;font-weight:bold;">28</span> but style didn’t rendered. Is there anyway to do this. below is the code.

const data = {
  labels: [
    'Eating 65 / 28',
    'Drinking 59 / 48',
    'Sleeping 90 / 40',
    'Designing 81 / 19',
    'Coding 56 / 96',
    'Cycling 55 / 27',
    'Running 48 / 100'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};