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:

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/

Kathernkatheryn

even if it involves duplicating the lines, would this suit you jsfiddle.net/webtiki/gLnkwLj0/10 ? – Saddletree

@Saddletree 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? – Kathernkatheryn

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". – Saddletree

@Saddletree No it wouldn't be a large amount, and agreed on the cleanliness part, however it does work. I wasn't sure if there was a way do something like a :before on a datapoint with SVG, but i don't think that's possible haha – Kathernkatheryn

No, you can't use pseudo elements on svg elements. The best solution would be to change the data point element from <line> to <circle>, this way you could control the fill and stroke-color/width but I don't know if chartist.js provide an option for that. – Saddletree

Mmm, i'll have a look at the source and see if it's possible. I don't mind doing the double line thing but would be brill to be able to change it in a slightly cleaner way – Kathernkatheryn

@AndyHolmes Not all that relevant but may I have the dribbble link to this? Its pretty damn cool! – Berfield

@Berfield dribbble.com/shots/… – Kathernkatheryn

@AndyHolmes Thank you, I'm tempted to recreate this on CodePen. – Berfield

@Berfield that'd be awesome. Let me know if you do :) – Kathernkatheryn

@Berfield did you get started on it at all? – Kathernkatheryn

@Berfield any link at all? :) – Kathernkatheryn

Let us continue this discussion in chat. – Berfield

I have recreated this on Codepen, Enjoy. – Berfield

Very well done, thanks for the link. Chart JS does work well on this – Kathernkatheryn

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

Saddletree

That, is perfect. Thank you so so much! – Kathernkatheryn

Is there some global way to do that? it seems extremely odd they didn't use circle in the first place since it's less code and easier to customize.. – Jahdai

I ended up just changing the source code at point = seriesElement... – Jahdai

@Jahdai do you have a link to a jsFiddle or anything to show? – Kathernkatheryn

@AndyHolmes I have jsbin, with my own implementation, check it out – Jahdai