ChartJS point style with glow or shadow

user_1699768 0
Viewed 57

How can I achieve this kind of design in ChartJS? I already have a code but I'm missing the "glow" in the active point

enter image description here

This is my code

dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
dataset._meta[metaIndex].data[index]._model.pointRadius = 7;
dataset._meta[metaIndex].data[index]._model.borderColor = '#007cff';
dataset._meta[metaIndex].data[index]._model.pointBackgroundColor = '#FFFFFF';
dataset._meta[metaIndex].data[index]._model.pointBorderWidth = 10;
dataset._meta[metaIndex].data[index]._model.pointBorderColor = 'rgba(1, 124, 251, 0.2)';
dataset._meta[metaIndex].data[index]._model.pointHoverRadius = 5;

enter image description here

UPDATE:

I was able to replicate it using these codes

 dataset._meta[metaIndex].data[index]._model.pointStyle = 'rectRot';
 dataset._meta[metaIndex].data[index]._model.radius = 7;
 dataset._meta[metaIndex].data[index]._model.borderColor = '#007CFF';
 dataset._meta[metaIndex].data[index]._model.backgroundColor = '#FFFFFF';
 dataset._meta[metaIndex].data[index]._model.borderWidth = 3;

and in the options

const options = {
  elements: {
    point: {
      hoverRadius: 5,
      hoverBackgroundColor: '#FFFFFF',
      hoverBorderColor: 'rgba(1, 124, 251, 0.2)',
      hoverBorderWidth: 15,
      radius: 4,
      hitRadius: 5,
    },
  },
};
chart.js reactjs
1 Answers

You can achieve it by adding two separate data with separate styling to the dataset.

codesandbox

datasets: [
    {
      data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
      pointStyle: 'rectRot',
      pointRadius: 10,
      borderColor: '#007cff',
      pointBackgroundColor: '#FFFFFF',
      pointBorderWidth: 5,
      pointBorderColor: 'rgba(1, 124, 251, 0.2)',
      order: 1
    },
    {
      data: [1000000, 900000, 800000, 750000, 700000, 650000, 600000],
      pointStyle: 'rectRot',
      pointRadius: 6,
      borderColor: '#007cff',
      pointBackgroundColor: '#FFFFFF',
      pointBorderWidth: 2,
      pointBorderColor: '#007cff',
      order: 0
    },
  ]
user_137861030
Related