How to remove CSS fill property

Question

I'm using JavaScript Apexcharts and it lays out bars with different colors, the problem is that I have a CSS property that overrides the fill with one single color, so now all bars have one color:

I can't access the file due to administration access but i want remove that fill property, is there a way to override or even remove it from the style

When i uncheck the fill property:

I basically want the second image, but I can't access that css stylesheet, is there a way to do it with either jQuery or JavaScript?

I tried the following but none of them work.

$('.accordion svg').style.removeProperty('fill');
$('.accordion svg').css('fill','');
$('.accordion svg').removeAttr("style");
$('.accordion svg').removeAttribute('fill');

[Relevant answer](https://stackoverflow.com/a/40106010/2181514) (see comments) - it's likely that if you do remove it, you'll also remove the colours — freedomn-m, Oct 07 '21 at 16:06
Also looks like ([from this page](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)) that the default is blank, so if you remove it it will be black. — freedomn-m, Oct 07 '21 at 16:08

score 0 · Accepted Answer · answered Oct 17 '21 at 20:34

You can avoid using CSS here by setting the colors property on the chartOptions/options object.

Example:

getChartOptions() {
    return {
        chart: {
            type: "bar",
        },
        series: [...],
        colors: ["#123456", "#234567", ...],
        ...
    }
}

How to remove CSS fill property

1 Answers1