Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Dec 12 19:53
    felixxuoptovistech commented #748
  • Dec 11 13:47
    tomm1996 commented #1193
  • Dec 11 12:00
    tomm1996 commented #545
  • Dec 11 11:59
    tomm1996 commented #545
  • Dec 06 16:46
    titaniumbones opened #1203
  • Dec 02 21:49
    xuancongwen commented #21
  • Dec 02 07:34
    Hatead1 closed #1202
  • Dec 02 07:34
    Hatead1 commented #1202
  • Dec 01 11:04
    Hatead1 commented #1202
  • Dec 01 10:12
    Hatead1 opened #1202
  • Dec 01 08:52
    ilyador opened #1201
  • Nov 29 08:32
    petervtzand edited #1198
  • Nov 28 18:57
    titaniumbones commented #697
  • Nov 27 14:48
    peetwindhoek commented #846
  • Nov 27 10:26
    peetwindhoek commented #846
  • Nov 27 10:03
    varshinichowdary27 commented #846
  • Nov 27 09:45
    Lucas015 opened #1200
  • Nov 25 13:46
    petervtzand commented #1199
  • Nov 25 13:46
    petervtzand commented #1199
  • Nov 25 13:45
    petervtzand commented #1199
Ray García
Ville Hakulinen
anyone aroud?
is there a way to have multiple reference values for one axis in linear chart?
Pedro Rijo

Hey! I'm trying to increase the hit area of my chart points, but I can't find an easy way to do it.

I have this function that creates the point using the Chartist.Svg method:

function createCircle(data, chart) {
        return new Chartist.Svg('circle', {
            cx: [data.x],
            cy: [data.y],
            r: [5],
            'ct:value': data.value.y,
            'ct:meta': data.meta,
            class: 'ct-point-dashboard'
        }, 'ct-point-center-dashboard');

that's used in:

 myChart.on('draw', function (data) {
            if (data.type === 'point') {
                var pointClassName = 'some-name';
                var circle = createCircle(data, pointClassName);


               // more stuff...

maybe there's some configuration or plugin that I missed that could help me? the other alternative I guess it would be to put a div around the svg, but it doesn't seem a clean nor easy way to do it...

Ray García

Hey @gionkunz, hope you are doing well!

I have a simple question. Is there any way in the chartist api to make y axis dynamic? Something like lower value - 10. I've tried not defining low and high, and axis changes dynamically depending on values, but it uses lower value like if y=0. I want a little bit of space between minimum value and the y=0 point.

Gion Kunz
Hi @Rayoplateado_twitter if youre using the FixedScaleAxis low and high will be respected as definite range. The default AutoScaleAxis performs order of magnitude normalization for an even and clear scale which modifies the configured high low.
Check the custom axis tutorial on the getting started page
Gion Kunz
@pedrorijo91 cx cy and r should be set directly to the value but youre creating an array which contains the value
Ray García
Thank you @gionkunz!!
Pedro Rijo
thanks for the tip @gionkunz . But I'm not understanding how will that allow me to increase a point hit area?
Andrew Anguiano
Can anyone point me to the docs page where I can see all available options for a pie chart? Trying to customize some label stuff, but I’m not able to find in the docs where the options are listed. Just that I’m supposed to look in the examples…
Gion Kunz
Go to the API documentation and look for Pie chart default. Expand the coude excerpt jsing the shos code button.
Sorry Im typing on my mobile ;-)
Andrew Anguiano
Thanks @gionkunz! I don’t know why I was having such a hard time. At least it’s Friday.
Can the 'FILLDONUT PLUGIN' content prop accept JSX? I am not able to get anything rendering using something similar to : content: `<MyComponent prop=${myprop} />`
Yury Shevchenko
@gionkunz I'm trying to use chartist on my project where I'm using CSS Modules for styling. My classes look like this: 'LineChart--series--f45ba0'. Note the randomly generated bit at the end. There's a slight problem with this setup: chartist doesn't allow passing in classnames for individual series, and instead attaches the -a or -b bit to the end of the series classname. In my case, this generates classnames like 'LineChart--series--f45ba0-a' which is not what I want
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.