Change dot size individually Scatter Chart -- ChartJS

Question

How can I change the size of each different dot in my scatter chart?

var scatterChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [{
        x: -10,
        y: 0
      }, {
        x: 0,
        y: 15
      }, {
        x: 10,
        y: 5,
      }],
      pointRadius: 15,
      fill: false,
      pointHoverRadius: 20
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
      }]
    }
  }
});    

After this I want to change each dot size in matter of my ajax response data.

I tried to do this without the star ofc :

data: [{
  x: -10,
  y: 0
}, {
  x: 0,
  y: 15
}, {
  x: 10,
  y: 5,
  pointRadius: 15,
  *
}],    

but with no success.

Answer 1

you can put each point in a separate series.
this will allow you to assign a separate radius.

        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0

            }],
            pointRadius: 10,
            fill: false,
            pointHoverRadius: 20
        }, {
            label: 'hidden',
            data: [{
                x: 0,
                y: 15,

            }],
            pointRadius: 20,
            fill: false,
            pointHoverRadius: 20
        }, {
            label: 'hidden',
            data: [{
                x: 10,
                y: 5,
            }],
            pointRadius: 30,
            fill: false,
            pointHoverRadius: 20
        }]

and to prevent multiple legend entries from being displayed,
we can filter out all but one series label.

        legend: {
            labels: {
                filter: function(item, chart) {
                    return (item.text !== 'hidden');
                }
            }
        },

see following working snippet...

 $(document).ready(function() { var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), { type: 'scatter', data: { datasets: [{ label: 'Scatter Dataset', data: [{ x: -10, y: 0 }], pointRadius: 10, fill: false, pointHoverRadius: 20 }, { label: 'hidden', data: [{ x: 0, y: 15, }], pointRadius: 20, fill: false, pointHoverRadius: 20 }, { label: 'hidden', data: [{ x: 10, y: 5, }], pointRadius: 30, fill: false, pointHoverRadius: 20 }] }, options: { legend: { labels: { filter: function(item, chart) { return (item.text !== 'hidden'); } } }, scales: { xAxes: [{ type: 'linear', position: 'bottom', }] } } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <canvas id="chart"></canvas>

Answer 2

You should use a bubble chart that accepts the bubble radius in pixels (property r ) for each data point .

Please take a look at this sample chart .

Answer 3

I figured out you can specify an array of values for pointRadius & pointStyle properties:

 datasets: [ { label: "Plan", data: [10, 15, 5], pointRadius: [10, 5, 15], pointStyle: ["rect", "rect", "circle"], }, ],

This way you can specify a size of each dot individually