Add Outline To Svg Data Point In Chartist.js

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: new Chartist.Line('.ct-chart'

Solution 1:

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

DEMO

var chart = newChartist.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 = newChartist.Svg('circle', {
      cx: [data.x],
      cy: [data.y],
      r: [7],
    }, 'ct-circle');
    data.element.replace(circle);
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.css"  /><style>.ct-chart.ct-series.ct-series-a.ct-area {fill: orange;}
  .ct-chart.ct-series.ct-series-a.ct-line {stroke: orange;stroke-width: 3px;}
  .ct-circle {fill: orange;stroke-width: 5;stroke: #203135;}
  body {background: #203135;}
</style><divclass="ct-chart ct-perfect-fourth"></div>

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