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.

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.

• javascript
• charts
• chart.js

4 Answers 4

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

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.

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>

as you can see in my snippet, the pointRadius can be a function, that will be invoked at runtime, with a lot of parameters that may interest you. one of them is the value of the point, which you may use to dynamically scale the point size.

i wish to thank the other answer givers which inspired my quest for the answer, and of course the chart js creators, that made all this wonderful charting library.

$(document).ready(function() {
    var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), {
        type: 'scatter',
        data: {
datasets: [
  {
    label: "Plan",
    data: [{x:10, y:10}, {x:15, y:15}, {x:5, y:5}],
    pointRadius: (pt) => {/*console.log(Object.keys(pt));*/ return pt.parsed.y;},
    pointStyle: "rect",
  },
],

        },
        
    });
});

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/chart.umd.min.js"></script>

<canvas id="chart"></canvas>