Chartist-js: more colors for Pie Charts

[benelang]

If you have a Pie Chart with more than 5 series the one above number 5 will all be in the same color so you can't see a difference any more.

Thank you very much for adding more colors.

[gionkunz]

Can you use the Sass version of the CSS? Its very easy to modify or add more colors there. I could also add more colors to the library but so far chartist only knows 4 colors :-)

[beefmaster]

i will attempt to fix do this in my fork, the dev has alot to do so ill try and help him out

[snickers54]

Hi,
I'm going to use your library to display some gauge, but I'm surprised to not be able to add my custom colors via your API. Am I missing something ? I quickly understood I could add / change my colors into the CSS file.
However, my main concern is to make a dynamic gauge which will change color depending on a value and thresholds. Why not let the user put something like this :

new Chartist.Pie('.ct-chart', {
  series: [20, 10, 30, 40],
  colors:["#333", "#222", "#111", "#000"]
}, {
  donut: true,
  donutWidth: 60,
  startAngle: 270,
  total: 200,
  showLabel: false
});

[DSpeckhals]

@snickers54 You actually can customize the style for each series by passing the data parameter like this (using your example):

new Chartist.Pie('.ct-chart', {
  series: [{
      value: 20,
      className: "myclass1"
    },
    {
      value: 10,
      className: "myclass2"
    },
    {
      value: 30,
      className: "myclass3"
    },
    {
      value: 40,
      className: "myclass4"
    }]
}, {
  donut: true,
  donutWidth: 60,
  startAngle: 270,
  total: 200,
  showLabel: false
});

className represents a CSS class. You could then somewhere define a class:

.myclass1 {
  stroke: #333;
}

updated to reflect a refactor

[gionkunz]

@snickers54 the reason why we don't add appearance relevant configuration to JavaScript is because our main goal is to keep a strong separation of concerns. I can understand this looks weird maybe unfamiliar in the first place as all other charting libraries support that, but it's part of the core philosophy of Chartist.js. If you'd like to color your chart based on thresholds I recommend you're using the draw events in Chartist.js. You could also develop a Plugin if you got time :-)

With a gauge chart this could look something like this: http://jsbin.com/pemute/1/edit?js,output

[snickers54]

thanks @DSpeckhals, but it's complex to dynamically generate css class from your DB. My colors are unknown until I get my data from the DB, and the number of threshold is also dynamic :) But thanks for this trick.

@gionkunz Ok, I get it, so I found a solution, as I'm working with angularJS and my Gauge is a directive, I directly edited the color into the DOM. It's maybe less classy, but i's working.
Thanks for your exemple, but my need is to always display the triggers and see the value (with an arrow) change. Here a picture of what I did :

It's working pretty well :) Thank you guys for your answers.

[DSpeckhals]

@snickers54 I was running into the same problem about dynamically generated styling. I ended up "cheating" a bit and adding an optional data field for color, then appending to or creating the style attribute for that stroke. However, like @gionkunz has suggested and shown in the example, I think I'm going to be aiming at capturing and handling the draw event instead. I like the separation of concerns.

By the way, is there any chance you could share your implementation like I see in your image? It looks great!

[gionkunz]

I'm closing this issue for now. Please reopen if needed.

[ilanbiala]

@gionkunz is there any way we can expand Chartist's color palette to ~8 colors? 4 is fine for line charts, but not for bar charts and pie charts where there are very frequently more than 4 pieces of data.

[gionkunz]

Just add more colors in your Sass settings file. If you import your own copy of the Sass settings file and change this line https://github.com/gionkunz/chartist-js/blob/develop/src/styles/settings/_chartist-settings.scss#L65 you can add as many colors as you like.

[ilanbiala]

@gionkunz it is nice that we can customize it, but what is the weight in adding 2-4 more colors?

[gionkunz]

Hey there. We already track this in the ticket #124 . I'll close this ticket now and we can track the creation of more colors in the default settings in the other ticket.

[gionkunz]

Sorry this ticket was already closed ;-)

[ilanbiala]

@gionkunz I thought that issue was somewhat related to functionality. I'll follow there.

[m-hcb]

here is the solution.. you just have to copy the relevant classes to your chart type from and apply your custom colors to that chart strokes. like I have done for donut.

.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut {
        stroke: #002827
    }
    .ct-chart .ct-series.ct-series-b .ct-slice.ct-donut {
        stroke: #00382f
    }
    .ct-chart .ct-series.ct-series-c .ct-slice.ct-donut {
        stroke: #00591e
    }
    .ct-chart .ct-series.ct-series-d .ct-slice.ct-donut {
        stroke: #007f00
    }
    .ct-chart .ct-series.ct-series-e .ct-slice.ct-donut {
        stroke: #009900
    }
    .ct-chart .ct-series.ct-series-f .ct-slice.ct-donut {
        stroke: #00b200
    }
    .ct-chart .ct-series.ct-series-g .ct-slice.ct-donut {
        stroke: #51ce00
    }
    .ct-chart .ct-series.ct-series-h .ct-slice.ct-donut {
        stroke: #96ff00
    }
    .ct-chart .ct-series.ct-series-i .ct-slice.ct-donut {
        stroke: #ceff00
    } 

check this JSBin http://jsbin.com/cecaha/1/edit?css,output

[bosz]

@snickers54 thanks very much. You saved my day.

[GuilhermeLessa]

I will apply className: "myclass1" in my js.

But what is css property for custom pie color? background-color? Dont works!

[davidplbll]

app.title = '环形图';

option = {
    tooltip: {
        trigger: 'item',
        formatter: "{b}<br/> {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['1','2','3','4','5']
    },
    series: [
        {
            name:[1,2,3,4,5],
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'1'},
                {value:310, name:'2'},
                {value:234, name:'3'},
                {value:135, name:'4'},
                {value:154, name:'5'}
            ]
        }
    ],
    color:["#ffcccc", "#ccd9ff", "#000099", "#bd0f66"," #cc0000"]
};

[danniolsen]

I will apply className: "myclass1" in my js.

But what is css property for custom pie color? background-color? Dont works!

Hi. Svg elements uses fill: not background-color: