[Chartjs]-Change dot size individually Scatter Chart — ChartJS

by

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.

2👍

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

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>

0👍

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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

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

Leave a comment