[Chartjs]-Show image instead a point in a ChartJS scatter plot

by

1👍

According to Chart.js documentation, pointStyle is either a string or an Image but not an array.

If you want to have individual styles for your points, you can use the Plugin Core API. It offers several hooks that may be used for executing custom code. You could use the afterDraw hook to assign a different pointStyle to each point.

plugins: {
  afterUpdate: function(chart) {
    const meta = chart.getDatasetMeta(0);
    meta.data[0]._model.pointStyle = img;
    meta.data[1]._model.pointStyle = 'rect';
    meta.data[2]._model.pointStyle = 'triangle';
    meta.data[3]._model.pointStyle = 'circle';
  }
},

I your amended code below, I used a slightly different but more compact approach and defined the pointStyles array outside of the chart configuration.

const img = new Image();
img.src = 'https://i.stack.imgur.com/gXQrT.png';
const pointStyles = [img, 'rect', 'triangle', 'circle'];

new Chart(document.getElementById('myChart'), {
  type: 'scatter',
  plugins: {
    afterUpdate: chart => {
      chart.getDatasetMeta(0).data.forEach((d, i) => d._model.pointStyle = pointStyles[i]);
    }
  },
  data: {
    datasets: [{
      data: [
        {x: 1.447377, y: -0.014573},
        {x: 2.365398, y: -1.062847}, 
        {x: -2.507778, y: 0.389309},
        {x: -0.432636, y: 0.124841}
      ],
      backgroundColor: ['white', 'green', 'red', 'orange'],
      pointRadius: 10
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment