Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 01 20:34
    sabithapopuri edited #1273
  • Dec 01 20:33
    sabithapopuri opened #1273
  • Nov 20 15:56
    ZNick86 opened #1272
  • Nov 10 22:58
    sebestenyb commented #1266
  • Oct 26 19:02
    Instrumedley commented #409
  • Oct 26 18:46
    Instrumedley commented #409
  • Oct 26 10:52
    markentingh commented #409
  • Oct 24 08:44
    Instrumedley commented #409
  • Oct 21 13:17
    wujekbogdan edited #1271
  • Oct 21 13:16
    wujekbogdan edited #1271
  • Oct 21 13:13
    wujekbogdan opened #1271
  • Oct 07 19:26
    mobjois commented #262
  • Oct 07 17:06
    khaos13 opened #1270
  • Sep 28 22:24
    pauloxnet closed #1125
  • Sep 25 18:23
    burzum commented #810
  • Sep 19 03:18
    markterrill commented #21
  • Sep 16 12:33
    MikPak commented #235
  • Sep 11 07:28
    SameerMandavia opened #1269
  • Sep 08 00:48
    kahve6 commented #1189
  • Aug 30 16:53
    lessless closed #1268
Yury Shevchenko
would you accept a PR that adds an option to explicitly pass in classnames for individual series?

so that I could do something like

   classNames: {
        series: css.series, // 'LineChart--series--f45ba0'
        'series-a': css.seriesA, // 'LineChart--seriesA--1bac43'
        'series-b': css.seriesB, // 'LineChart--seriesB--eff81c'


Josh Holtz
is it possible to do something like this with the bar chart?
base the chart off of 50 instead of 0?
Josh Holtz
nvm, figured it out - https://jsfiddle.net/oqx7ujka/3/
Andrej Rapoport
Hi! Maybe I am missing something, so I would appreciate any help. The Chartist homepage lists some facts about the lib. One of them is "... clear separation of concerns (Style with CSS & control with JS)". I like the concept very much but once I tried the lib to make a bar diagram I could not avoid putting some pixel constants inside my JS (e.g. offset for axisY orseriesBarDistance). I saw them in some examples and was irritated... Can I avoid them using CSS?
Andrej Rapoport
One other thing, that irritated me, was the global resize listener. After reading facts about Chartist I did not expect to see such a technique :-) I know it is a temporary solution. But maybe you could mention on the homepage, that the library is not quite ready...
I hope I did not offend anyone :-) It's just a small feedback I have after trying the lib.
Paul Aikman
Hi folks. Wonder if anyone has any thoughts on performance using multiple (simple) graphs on the same page?
Particularly on mobile, just to make it extra tricky 😎
It should be no issue. Graphs are svg so the device will render them fairly easy
Paul Aikman
Great! I was having some issues with d3 (react wrapper). It was fine... just felt a bit heavy.
We use chartist in production with react. That being said, we have to rewrite almost every plugin because of their liberal use of jQuery. A heavyish dependency we don't really need
Travis Dixon
gionkunz/chartist-js#37 <- need so bad
@Mbeaulne I've found the same with plugins. People love their jquery. Maybe we should start publishing forks / pull requests to remove that dependency
Does anyone know a way to lock the gridlines/axis to a set of hard-coded steps?
I'd like to just give a list of values rather than an interpolation function
Andres Roget
hey folks im no expert on SVGs but I am working in a chart and it all works well on all major browsers except when i go to Microsoft Edge for some reason the X axis labels are getting cut off... i've tried several things like setting a virtualbox, setting a fixed with to the chart, etc, needless to say none of them worked here is how the same chart looks like on Chrome and Edge
Screen Shot 2017-08-02 at 11.44.39 AM.png
Screen Shot 2017-08-02 at 11.45.00 AM.png
any ideas?

do You have any plan to add viewBox atribute to svg element?
As i know it is the best way to make true responsive svg that fills the parent container.
Only what we need is current callculated ratio, inside viewBox

Filling a parent container by svg is helpful when we manipulate a size of that parent container.
Changing parent width and height rarely triggers resize of window event.
With viewBox we dont need redraw and recalcuate Chart after parrent container change.


Arthur Cohen
Hi, im working on a system tha uses a series of graphs, and Im using this tool to help me. My problem is when a Line graph has no data for any reason, and error occurs with this: "Uncaught TypeError: Cannot read property 'pathCoordinates' of undefined", and the graph dont render the content of the legend plugin. This only occurs on the Line chart. With bars everything works fine.
The top graph is a bar chart. the lower left is a line. Both has no data (due the data filter), but the botton one raise an error and dont show legend
anybody help?
Chris Ragon
I am trying to set the x-axis labels which is a list of of the last 7 dates. The issue I am encountering is that the dates repeat themselves if multiple data points share the same date (IE: Jan 22 Jan 22 etc...). How can I remove duplicate dates?
axisX: {
                    showGrid: false
                    type: Chartist.AutoScaleAxis,
                    labelInterpolationFnc: function (value, index) {
                        return moment(value).format('MMM DD');
Minh Nguyen
Hi i use chartist in my app and wonder for line graph, how can i add vertical cursor with tooltip?
or if making the data point hover area larger to have the tooltip display easier on mobile screen
Nick Gentile
I can't seem to get Chartist to be defined in my document. I am running a gulp script to combine a bunch of js files into one and uglify it (then put into head of doc). Has anyone experienced any similar issues / have thoughts?
Alex Gillis
hi, quick question out there, i'd like to generate the graphic on my code and then save as an svg, reason is that i dont show the graph into the screen but i use pdfmake.js rto create a report. so literally i go on the client side from json (api call) to pdf file. so it anyway to compute the chart and get the result in svg whith need to render on canvas kind like myChartSVG=Chartist('#chartist-chart', data, options).exportTosvg();
Hi, i am wondering if es-6 version is available if not then any reason for that.
How can you set fewer steps on the y axis?
Pedro Cunha
Anyone here know how to add top corner radius to bar charts? Using rounding on the stroke affects both edges of the bar (line svg)
Screen Shot 2020-03-09 at 2.47.20 PM.png
Yo anybody experienced this kind of bug
I'm using react chartist btw
Fixed : add manual styling
Holger Amann
hey there! I'm pretty new to graphs (coming from a devops backgorund) and I'd like plot a graph with around ~10k datapoints. I gave them chartist as a line graph with almost defaults and now the graph looks like this
Bildschirmfoto 2020-05-09 um 17.34.36.png
whereas I'd like it to look more like this (same datapoints)
Bildschirmfoto 2020-05-09 um 17.34.10.png
could someone guide me or give some hints please in which direction I should look?
Hey everyone, my chartist charts are being re-drawn on every event, whether it be onclick or window resize. I've no idea how to solve this issue. Please let me know if anyone finds a solution to this. I'm using react-chartist.
Rishi Penmetcha
Does anyone know how to center the labels for the y-axis ticks? The default labels are just above the lines, I want to be able to move it right below the line or at least centered.
Jitesh Sinha
I m using chartist.js for displaying my graph using vue.js
Can any one help me how to show my custom label in stacked bar chart
Sabitha Popuri
Hi I am using chartist-js multi-line chart. For me, the edges of the data points in the graph are not sharp. Is it possible to do that? Also, can we give click events to data points?