Stacked Area Chart Colors

[Benades]

Hi, I managed to change a Stacked Column Chart colors by adding a header and setting a style to it:

<style>
rect.highcharts-point.highcharts-color-0{
fill: #006B3C;
}
rect.highcharts-point.highcharts-color-1{
fill: #682861;
}
rect.highcharts-point.highcharts-color-2{
fill: #CD9B06;
}
</style>

Now I need to do the same with a Stacked Area Chart but cannot find the same heading to apply the color to (highcharts-color-0):

When I use the same logic to style, it changes colors for all to the same color because there are no differentiating name:

<style>
path.highcharts-area{
fill: #CD9B06;
}
</style>

 

[TellMeWhy]

Try JS instead,

 

<script type = "text/javascript" >

    var timer = setInterval(function() {
        //Find if chart exists using rect element every x milliseconds
        if (document.getElementsByTagName('rect') != null) {
            //Update Chart
            UpdateChart();
        }
    }, 500);


function UpdateChart() {
    try {

        Highcharts.charts[0].update({
            
//CHANGES HERE
          
          
  series: [

{color:'red'},
{color:'blue'},
{color:'yellow'}


]

//CHANGES END HERE

            
});
        //Stop checking
        clearInterval(timer);

    } catch (err) {
        //log errors
    }

}; 
</script>

basically makes the first one red, then blue, then yellow

 

No script:

 

With the script

[Benades]

As always @TellMeWhy, thank you very much. It works as expected

[Benades]

@TellMeWhy it works most of the time but there are instances where it does not change and I have to refresh the page multiple time for it to take effect. Any way to get around that?

[TellMeWhy]

7 hours ago, Benades said:

@TellMeWhy it works most of the time but there are instances where it does not change and I have to refresh the page multiple time for it to take effect. Any way to get around that?

Probably the rendering of charts, you can increase delay here, 500 means 500millisecond delay

[futurist]

On 7/7/2021 at 9:28 AM, TellMeWhy said:

Try JS instead,

 

<script type = "text/javascript" >

    var timer = setInterval(function() {
        //Find if chart exists using rect element every x milliseconds
        if (document.getElementsByTagName('rect') != null) {
            //Update Chart
            UpdateChart();
        }
    }, 500);


function UpdateChart() {
    try {

        Highcharts.charts[0].update({
            
//CHANGES HERE
          
          
  series: [

{color:'red'},
{color:'blue'},
{color:'yellow'}


]

//CHANGES END HERE

            
});
        //Stop checking
        clearInterval(timer);

    } catch (err) {
        //log errors
    }

}; 
</script>

basically makes the first one red, then blue, then yellow

 

No script:

 

With the script

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer (setInterval):

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});