Chartist-js: Colours of Bars in Bar graphs

[meghaklp]

Hi, I am experimenting with chartist and I had few questions:
1) Is there an easy way to make a stacked horizontal bar chart?
2) Can bar charts have tool tips?
3) Can each bar in a single series bar chart have a different colour (hypothetically)
4) How can I over-ride the default colour of a single series bar chart? How do I specify it in the options.

Any help? Maybe these are not issues but, just questions. Thanks.

[gionkunz]

1) yes. check http://gionkunz.github.io/chartist-js/examples.html#stacked-bar-chart
2) They can. However, tooltips should be developed on top of chartist. You can get an example of how to write tool tips in this article http://www.smashingmagazine.com/2014/12/16/chartist-js-open-source-library-responsive-charts/ . There is also an open issue for creating a tool tip plugin which I'm supporting (but have no time atm) #219
3) Currently this is not possible but there is an open issue that tracks this: #209
4) You can get an example for this here: http://jsbin.com/kowida/2/edit?html,css,js,output

[meghaklp]

Thanks, this is very useful

[OscarGodson]

This is old but if other people came to it i just used CSS to color each bar and make repeating patterns. For example, if you had 4 colors you wanted to repeat you could use CSS like:

.ct-chart .ct-bar:nth-of-type(4n+1) {
  stroke: #71A28A;
}

.ct-chart .ct-bar:nth-of-type(4n+2) {
  stroke: #FF6414;
}

.ct-chart .ct-bar:nth-of-type(4n+3) {
  stroke: #EFB200;
}

.ct-chart .ct-bar:nth-of-type(4n+4) {
  stroke: #91A453;
}

[rajkaran]

@gionkunz I am trying to have different colour for every bar. I have tried JSbin example you have mentioned here - http://jsbin.com/kowida/2/edit?html,css,js,output

For some reason CSS selector for every bar isn't working. I am using angular-chartist.js wrapper.

[MishaBeskin]

Hi,
How I can set different color to Bar in graph if its values are negative?

[FelixBLimetta]

Hi,
How I can set different color to Bar in graph if its values are negative?

+1 This is something I could really use!

[gionkunz]

Hi guys, check the advanced section on colour in the getting started documentation.

[purplelady105]

@rajkaran I cannot get the CSS selectors to work on my page either. Did you ever figure out how to make each bar a different color?

[rajkaran]

@purplelady105 No I have not.. Moved onto other library.

[lubosdz]

Colors for a single series bars:

.ct-bar{
    stroke-width: 40px;
}

.ct-bar:nth-child(1){
    stroke: #379683 !important;
}

.ct-bar:nth-child(2){
    stroke: #91A453 !important;
}

.ct-bar:nth-child(3){
    stroke: #EFB200 !important;
}