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', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    [5, 9, 7, 8, 5, 3, 5, 4]
  ]
}, {
  low: 0,
  showArea: true
});

HTML:

<div class="ct-chart ct-perfect-fourth"></div>

CSS:

.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; }
.ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; }
.ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; }

body { background: #203135; }

I'm just trying to simulate what they have on this awesome design i found on dribbble where each data point has an outline of a darker shade/similar shade to the background. I have tried using outline in CSS, but it produces a square of black (or whatever colour i choose) around the data point, and i can't work out how to get it rounded

And finally, here is what i have already in a jsFiddle - /

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', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    [5, 9, 7, 8, 5, 3, 5, 4]
  ]
}, {
  low: 0,
  showArea: true
});

HTML:

<div class="ct-chart ct-perfect-fourth"></div>

CSS:

.ct-chart .ct-series.ct-series-a .ct-area { fill: orange; }
.ct-chart .ct-series.ct-series-a .ct-line { stroke: orange; }
.ct-chart .ct-series.ct-series-a .ct-point { stroke: orange; }

body { background: #203135; }

I'm just trying to simulate what they have on this awesome design i found on dribbble where each data point has an outline of a darker shade/similar shade to the background. I have tried using outline in CSS, but it produces a square of black (or whatever colour i choose) around the data point, and i can't work out how to get it rounded

And finally, here is what i have already in a jsFiddle - http://jsfiddle.net/andyjh07/gLnkwLj0/

• javascript
• jquery
• css
• svg
• chartist.js

• 2 even if it involves duplicating the lines, would this suit you jsfiddle.net/webtiki/gLnkwLj0/10 ? – web-tiki Commented Feb 27, 2015 at 10:13
• @web-tiki I did think of this, the chart could have more than one dataset (coloured lines) so I would just need to serve each dataset's data twice wouldn't I? Would this have any impact on load times etc or will it be minimal? – Andy Holmes Commented Feb 27, 2015 at 10:18
• In your case (assuming you don't need to display a large number of line) I don't think load time would be significantly impacted. The point is that it isn't "clean". – web-tiki Commented Feb 27, 2015 at 10:25
• 4 I have recreated this on Codepen, Enjoy. – Ruddy Commented Mar 5, 2015 at 11:25
• 1 Very well done, thanks for the link. Chart JS does work well on this – Andy Holmes Commented Mar 5, 2015 at 11:34

1 Answer 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 = 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);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.7.2/chartist.min.css" rel="stylesheet" />
<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>
<div class="ct-chart ct-perfect-fourth"></div>

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