question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamically custom colors

See original GitHub issue

Hi, and sorry with my very bad English

I’m making a horizontal chart with ajax, I extract labels, data and colors from the database, and try to paint the chart with the colors of the database, I use two functions: // use te custom colors f_graph_custom_colors(nId, Fcc); // painting the graph f_graph_paint(nId, Fnombres, data_final); // nId is on graph is painted, Fnombres is an array of labels, and data_final is an array of arrays I don’t have a problem painting the graph, I have probles utilizing the custom colors there is the function: function f_graph_custom_colors(nId, Fcc) { // document.head.innerHTML = document.head.innerHTML + '<style>' + nId + ' .ct-series.ct-series-a line {fill: ' + Fcc[0] + ';} ' + nId + ' .ct-series.ct-series-b line {fill: ' + Fcc[1] + ';} ' + nId + ' .ct-series.ct-series-c line {fill: ' + Fcc[2] + ';} ' + nId + ' .ct-series.ct-series-d line {fill: ' + Fcc[3] + ';} ' + nId + ' .ct-series.ct-series-e line {fill: ' + Fcc[4] + ';} ' + '</style>'; I try to inject the css in the header, after the css of the chartist, I read about utilizing custom color changing the css, but I need it dinamically.

Thanks for the responses, and sorry for the inconvenience.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
Jeketerricommented, Mar 29, 2017

Finish!! Thanks for helping sire, and thanks for your beautiful Lib, This is my final function:

function f_graph_custom_colors(nId, chart, Fcc) {
    var flagstone = true;
    chart.on('draw', function (context) {
        if (context.type === 'bar' && flagstone ) {
            flagstone = false; // only enter to this if once
            document.head.innerHTML = document.head.innerHTML + '<style>' +
                nId + ' .ct-series.ct-series-a line {stroke: ' + Fcc[0] + ';} ' +
                nId + ' .ct-series.ct-series-b line {stroke: ' + Fcc[1] + ';} ' +
                nId + ' .ct-series.ct-series-c line {stroke: ' + Fcc[2] + ';} ' +
                nId + ' .ct-series.ct-series-d line {stroke: ' + Fcc[3] + ';} ' +
                nId + ' .ct-series.ct-series-e line {stroke: ' + Fcc[4] + ';} '
                + '</style>';
        }
    });
}
1reaction
gionkunzcommented, Mar 28, 2017
Read more comments on GitHub >

github_iconTop Results From Across the Web

Designing Harmony into Dynamic Color - Material Design
Material creates color harmony by adjusting custom colors towards the user color for a more pleasing overall scheme. From this, we realized we ......
Read more >
How to add dynamic colors with CSS
Dynamic colors are defined by a content editor, meaning that the design system might not necessarily know about the color beforehand.
Read more >
How do I use dynamic colors?
Click the dynamic icon next to the Title's Text Color field. Choose the custom field to be used. In this example, Post >...
Read more >
Adding dynamic color to your app
Adding dynamic color to your app · 1. Before you begin · 2. Starter App Overview · 3. Updating Gradle Dependencies · 4....
Read more >
Enable users to personalize their color experience in your ...
Create your theme with tokens · To learn more about Dynamic Color, custom colors, and generating tokens, check out the Material 3 Dynamic...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found