Stack Overflow
Stack Overflow

Questions tagged [chartist.js]

Chartist.js is a JavaScript responsive charting library using SVG.

Chartist.js is a responsive charting library using .

Its source code is available on GitHub.

234 questions
24
votes
8 answers

Using Chartist.js how do you change the color of the stroke for a donut chart?

Hello I am trying to create the following donut chart using Chartist.js: GOAL CHART This is what the chart looks like currently: Chartist.js Donut Chart I am trying to find where or how I can change the colors of this chart to match the 1st donut…
Crystal O'Mara
  • 501
  • 2
  • 4
  • 9
20
votes
3 answers

Selecting an element by its attribute when it has a colon in its name

Consider the CSS selection I have here: http://jsfiddle.net/dx8w6b64/ /* This works: #myChart .ct-series-b .ct-bar { */ /* This does not (chromium, glnxa64) */ ['ct\:series-name'='second'] .ct-bar { /* Colour of your points */ stroke:…
Ashish Uthama
  • 1,331
  • 1
  • 9
  • 14
13
votes
1 answer

How to show label when mouse over bar

I made a Bar chart by chartist.js. Now I want to add some listening event on the bars. How can I do to let label show up when mouse over the bar?
鄭元傑
  • 1,417
  • 1
  • 15
  • 30
13
votes
1 answer

Add outline to SVG data point in chartist.js

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,…
Andy Holmes
  • 7,817
  • 10
  • 50
  • 83
12
votes
1 answer

Changing chartist text color and size

The font size on the charts are to small and hard to read on certain colors. Is there a way to change these attributes? I can do this do make the whole pie red but setting color or font-size doesn't make a change: .ct-series-x .ct-slice-pie { …
erdomester
  • 11,789
  • 32
  • 132
  • 234
10
votes
2 answers

chartist js rotate labels on x-axis

I have set up a js fiddle which demonstrates how axis labels can be rotated, based on an issue raised on github. It works fine in the js fiddle example below, but when I try this on my site the labels are not…
DavidB
  • 2,566
  • 3
  • 33
  • 63
9
votes
3 answers

Chartist.js make fill area expand all the way to the right

I'm using showArea: true but can't find the appropriate setting to make that fill all the way. Example: I assume this is because I don't have any data points after where it ends, but I don't want the green line to extend all the way across the top.…
Westwick
  • 2,367
  • 3
  • 28
  • 51
9
votes
3 answers

Chartist.js remove labels?

So I can display:none the labels ex. below with css, but my .ct-chart still has something on the left and bottom side of the chart ex. image below. .ct-labels, .ct-grids { display: none; } Ideally the blue chart is over to the left of the white…
Michael Joseph Aubry
  • 12,282
  • 16
  • 70
  • 135
8
votes
1 answer

Format a number with grouped thousands on Y-Axis in graph using chartist.js

I have created graph to display value in graphical form by Chartist.js library in JavaScript (PHP). All the values of Y-Axis are coming from database. But I am not able to display Y-Axis in grouped thousands format. I want to display thousand format…
Puneet Chawla
  • 5,729
  • 4
  • 16
  • 33
7
votes
2 answers

chartist.js pie chart with labels AND percentage on the pie

I want to create a pie chart with chartist.js with labels (which are shown in the legend) AND also with percentages in the pie itself. This is the pie chart. I want to add percentage values to the pieces. https://i.stack.imgur.com/SiIKb.png Here…
Sabine
  • 77
  • 1
  • 1
  • 5
6
votes
1 answer

How to change line colors of chart in Chartist.js

I'm currently using Chartist.js, But I can't change the default line colors of Chart. Chartist.js For SIMPLE LINE CHART I've tried: .ct-series-a .ct-line{ background-color: blue; } But It brings no result. How to fix this?
S M Iftakhairul
  • 1,120
  • 2
  • 19
  • 42
5
votes
2 answers

Update chartistjs with new data?

I can reanimate the chart using a setTimeout (at the bottom, on the created event) by using chart.update.bind(chart). Can anyone suggest a way I can pass new data into that chart object? Maybe with a prototype method? Or Should I just create a whole…
Michael Joseph Aubry
  • 12,282
  • 16
  • 70
  • 135
4
votes
2 answers

Adding HTML element to a vue template

I'm using a chart component (Chartist) that requires a HTML element to use as a parent when rendering the SVG. The elements that the chart can use is generated during a v-for loop, which means that they are not added to the DOM at the time of the…
jgauffin
  • 99,844
  • 45
  • 235
  • 372
4
votes
2 answers

Chartist.js grid color

I would like to change grid color on Chartist.js from default grey. I tried to override ct-grid-color setting, but probably did something incorrectly. Can anyone please suggest how to do it?
onlyvix.blogspot.com
  • 347
  • 3
  • 9
4
votes
1 answer

Chartist not defined error

I am trying to use the Chartist.js framework to create charts and graphs for my site. But for some reason I keep getting the error "Chartist is not defined" I can't figure out how to fix this error. Please see the code below:
Skywalker
  • 4,984
  • 16
  • 57
  • 122
1
2 3
…
15 16