13

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 Dribbble shot from Piotr

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

Andy Holmes
  • 7,817
  • 10
  • 50
  • 83
  • 2
    even if it involves duplicating the lines, would this suit you http://jsfiddle.net/webtiki/gLnkwLj0/10/ ? – web-tiki Feb 27 '15 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 Feb 27 '15 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 Feb 27 '15 at 10:25
  • @web-tiki 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 – Andy Holmes Feb 27 '15 at 10:27
  • No, you can't use pseudo elements on svg elements. The best solution would be to change the data point element from `` to ``, this way you could control the fill and stroke-color/width but I don't know if chartist.js provide an option for that. – web-tiki Feb 27 '15 at 10:32
  • 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 – Andy Holmes Feb 27 '15 at 10:35
  • @AndyHolmes Not all that relevant but may I have the dribbble link to this? Its pretty damn cool! – Ruddy Mar 04 '15 at 14:39
  • @Ruddy https://dribbble.com/shots/1821178-Sales-Report?list=buckets&offset=0 – Andy Holmes Mar 04 '15 at 14:42
  • @AndyHolmes Thank you, I'm tempted to recreate this on CodePen. – Ruddy Mar 04 '15 at 14:43
  • @Ruddy that'd be awesome. Let me know if you do :) – Andy Holmes Mar 04 '15 at 14:49
  • @Ruddy did you get started on it at all? – Andy Holmes Mar 04 '15 at 22:34
  • @Ruddy any link at all? :) – Andy Holmes Mar 05 '15 at 08:35
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72303/discussion-between-ruddy-and-andy-holmes). – Ruddy Mar 05 '15 at 08:35
  • 4
    [**I have recreated this on Codepen**](http://codepen.io/Ruddy/pen/yyqZqX), Enjoy. – Ruddy Mar 05 '15 at 11:25
  • 1
    Very well done, thanks for the link. Chart JS does work well on this – Andy Holmes Mar 05 '15 at 11:34

1 Answers1

17

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

web-tiki
  • 99,765
  • 32
  • 217
  • 249