Assign color of the legend dynamically in js or css?

[nosheen-javed]

Hi, How can I assign the color of the legend according to the color of the pie chart series? Right now its defined in CSS and hard coded, but what if the number of values increases then how I will know at which level i have to define the background-color in CSS?

I have searched it a lot, I have not even found the solution on any link.

Thanks. Regards, Nosheen Javed.

[tarekis]

Data series are colored by CSS in Chartist. I am pretty sure there is no clean way to read those values in JS. That means, your issue would be best solved by using custom CSS that applies to both series and corresponding legends. You'd probably end up implementing something like this.

http://codepen.io/chimmer/pen/aJvBgv

[Jeketerri]

Mi 2 cents to this topic:

you pass the ID of the div section(where the graph goes painted), the chart object(put a return on the graph paint function) and an array of colors( in hex and as string '#000000').

function f_graph_custom_colors(nId, chart, Fcc) {
    var flagstone = true;
    var abc = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    var estilo = '<style>';
    chart.on('draw', function (context) {
        if (context.type === 'bar' && flagstone ) {
            flagstone = false; // only enters this If once
            for (var i = 0; i < Fcc.length; i++) {
                estilo = estilo + nId + ' .ct-series.ct-series-' + abc[i] + ' line {stroke: ' + Fcc[i] + ';} ';
            }
            estilo = estilo + '</style>';
            $('head').append(estilo);
        }
    });
}

[tarekis]

I think styling is not the concern of the plugin itself, hence closing this.