Is it possible to add specific images/icons to specific coordinates in a line chart? The points might be different from the line points.

I searched a lot, but I couldn't find anything further than customizing tooltip content style.

I want to add stars or similar shapes to some points to indicate special events.

Is it possible to add specific images/icons to specific coordinates in a line chart? The points might be different from the line points.

I searched a lot, but I couldn't find anything further than customizing tooltip content style.

I want to add stars or similar shapes to some points to indicate special events.

• javascript
• css
• chart.js

Share Improve this question Follow asked Feb 12, 2016 at 8:36 tolgatolga 2,84055 gold badges4141 silver badges7474 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can extend the chart (override the draw method to draw the icons after the original draw function) to do this

---

Preview

---

Script

var img = new Image();
img.onload = function() {
  var size = 48;

  Chart.types.Line.extend({
    name: "LineAlt",
    draw: function() {
      Chart.types.Line.prototype.draw.apply(this, arguments);

      var scale = this.scale;
      [
        { x: 1.5, y: 50 }, 
        { x: 4, y: 10 }
      ].forEach(function(p) {
        ctx.drawImage(img, scale.calculateX(p.x) - size / 2, scale.calculateY(p.y) - size / 2, size, size);
      })
    }
  });

  ...

  var myLineChart = new Chart(ctx).LineAlt(data, {
    scaleBeginAtZero: true
  });
}

img.src = "<< image url >>";

Credits : Image by Everaldo Coelho and YellowIcon; LGPL (http://www.gnu/licenses/lgpl.html), via Wikimedia Commons

• Note that you need to wait for the image to load.

• If you are going to plot the image on coordinates outside of the scale range determined by the data values, you'll need to override the scale.

---

Fiddle - http://jsfiddle/rhzzpat0/

You can create a custom plugin. You can adjust the x and y co-ordinate based on your chart and data. Please note, local images can't be used, you need to have the image hosted or you can use base-64 url.

const CustomImage = {
  id: 'customImage',
  afterDraw(chart, args, options) {
    const {
      ctx,
      chartArea: {
        left,
        top,
        width,
        height
      }
    } = chart
    ctx.save()

    const img = new Image()
    img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAXCAYAAAAcP/9qAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALQSURBVHgBxVY9TFNRFP4oFfkRUyo1iAlp0hAkYYAEN0AX+VlMGQgjdDDByZi4YDSGwbipqKOxdSCxU4VFhUEENhBJrNEoldLEplFoq21phdbrOc+UtH33PZsYy5fcpL33vfud795zvvMghBihERGlwwZzlvEPAFaUFlEmFjgAGPUWM/4IYpOLSD714lc0RSOJivZGHKJRM9qJmVQQS6tefAoEEd9J4kh1FZqbGtHffRoDXZ16W0NTcfTyDOKuZdRe6kaVvQ1Gax0MpirsrhEJBZNwrWDBJtDyYBgtPW2oJdIYka9vBvFsaRlrHz5j/MIwOk7ZiicOO9zIkLpjzmGFLBeJxysIj7r3/xutZhx/OYZyCiwXb977cOvhEzgG+6TqDYUT3ydmFVKLZ1RFykefS8pI+8PYdrhVG3e02jA5fhFOz6xyFbrEvDEfYd2d85Dh26BLOv9z3qecRCFO1Jsx1NuF+1PT+sSs9s99mlUP7tHd8tACByzDUF8P1klxaCuiTcyJUzMiz8bUKx/0wKoFXZEMfMeLr73axKyIy0WGXR21++/7I9L5Bjry0FZYm/hfoaVYhjxirtX0pjxqY0G5yKB1WqyWzUWTuOKsTXEpGQ6fkRtBFlzHZQXll8Xi6ju0t9q0iTmx4neXpC9XUlDlOqrZ4WRgS6VLUDmYQb25SbFLGbTqmwNi7y4El9C9qRk47L2qNVVymckmd+i4f0zMqR7mGj9641zeXJmpEvWeEZXLMenVSRc1jE4MUNNQQdap9za2xRfrTRFqvy1S8+uq9a92pwjgivhouS4Cc2/z1mKJpHjkeSEGxq4J9/MFza8B3X6coO7EbTHjjyqtkMslTbVqIJXVlA9OSxizXq9ijZy1nL3cofq7qC2S0uamk1pbo6gPAe7DWQNhOy0sLaUfJ5JosJgpiL+XXdHE/wOcXPMoPaZZsYl+2FG6D74oDddvkqP2kRLQOxsAAAAASUVORK5CYII='

    const imgWidth = 30
    const imgHeight = 22.5
    const imgX = 350
    const imgY = 110
    ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight)

    ctx.restore()
  }
}

export default CustomImage