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'

by Alexander Kozhevin

HTML

<link rel="stylesheet" href="https://rawgit.com/gionkunz/chartist-js/develop/dist/chartist.min.css">
<script src="https://rawgit.com/gionkunz/chartist-js/develop/dist/chartist.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Globegitter/chartist-plugin-tooltip/master/dist/chartist-plugin-tooltip.css">
<script src="https://rawgit.com/Globegitter/chartist-plugin-tooltip/master/dist/chartist-plugin-tooltip.min.js"></script>
<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

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'
    })
  ]
});

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,
      'ct:meta': data.meta,
      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);
  }
});