ChartistJS custom point tooltip note

To use custom point on a line with tooltip, you need to add to properties to the object : 'ct:value' and 'ct:meta'

HTML

<script src="https://unpkg.com/[email protected]/dist/chartist.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/chartist.min.css">
<script src="https://unpkg.com/[email protected]/dist/chartist-plugin-tooltip.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/chartist-plugin-tooltip.css">
<br/>
<div class="ct-chart"></div>

CSS

.my-cool-point{
  fill-opacity: 1!important;
  stroke-width: 0px;
  stroke: red;
  transition: all 0.2s linear;
}
.my-cool-point:hover{
  r: 7;
  stroke-opacity: 0.2;
  stroke-width: 20px;
}

JavaScript

// Hey, some lines are marked with '// VERY IMPORTANT'. It's very important, that you also use these lines of code in your project, if you want to utilize the 'draw' event.

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3],
  series: [
    [
      {meta: 'description', value: 1},
      {meta: 'description', value: 5},
      {meta: 'description', value: 3}
    ]
  ]
}, {
  low: 0,
  high: 8,
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip({
      pointClass: 'my-cool-point',
      appendToBody: true, // VERY IMPORTANT
    })
  ]
});

chart.on('draw', function(data) {
  // If the draw event was triggered from drawing a point on the line chart
  if(data.type === 'point') {
    // We are creating a new path SVG element that draws a triangle around the point coordinates

    var circle = new Chartist.Svg('circle', {
	    cx: [data.x],
      cy: [data.y],
      r: [5], 
      'ct:value': data.value.y, // VERY IMPORTANT
      'ct:meta': data.meta, // VERY IMPORTANT
      style: 'pointer-events: all !important', // VERY IMPORTANT
      class: 'my-cool-point',
    }, 'ct-area');

    // With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
    data.element.replace(circle);
  }
});