Add outline to SVG data point in chartist.js

Question

I\'m playing around with Chartist.js and just wondering if you can give me a hand applying some styling to the SVG. Here is my code as follows:

jQuery:

n         


        

Answer 1

You can replace the data point default element by a element. This way you can control the circle stroke color, width and fill color.

DEMO

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  series: [
    [5, 9, 7, 8, 5, 3, 5, 4, 9, 23],
  ]
}, {
  low: 0,
  showArea: true,
  lineSmooth: Chartist.Interpolation.simple({
    divisor: 2
  }),
});

chart.on('draw', function(data) {
  if (data.type === 'point') {
    var circle = new Chartist.Svg('circle', {
      cx: [data.x],
      cy: [data.y],
      r: [7],
    }, 'ct-circle');
    data.element.replace(circle);
  }
});

Reference : http://gionkunz.github.io/chartist-js/examples.html#using-events-to-replace-graphics