Changing Bar Chart Colours

Help Center Get Answers
1

I have read a lot of topics about people wanting to change the colour of their Charts but couldn’t find a definitive answer.
So I went to play, and I am a novice coder, to say the least.

Anyway, I got one of my bar chart items to change color with the .css code, not sure it is the best way either.

#kn-report-view_364-1 g.highcharts-series.highcharts-series-0.highcharts-tracker rect {
fill: rgb(100,200,100)
}

image

The only problem is the legend doesn’t change with it.
The element looks to be

#kn-report-view_364-1 g.highlights-legend-item rect {
fill: rgb(100,200,100)
}
but that doesn’t seem to work as I can’t tell it which legend item to update.
Is there a better element to change or how can I get the legend to change to the same color?

Any help is greatly appreciated.

2

Hello Adrian,

I’m using Js to change color.
Checking working example on below link.
https://roberts.knack.com/farmers#graph/

$(document).on(‘knack-scene-render.scene_xyz’, function (event, scene) {
var ored = “#ed1c2c”;
var oblu = “#86BBD8”;
var colors1 = [oblu, ored, oblu, ored, oblu, ored, oblu, ored, oblu, ored];
var index = $(".highcharts-container").data(‘highchartsChart’);

    var legends = $(".highcharts-container").find(".highcharts-legend-item");

    var chart = Highcharts.charts;

    for (var x = 0; x < chart[0].series.length; x++) {
        var series = chart[0].series[x];

        $.each(series.data, function (i, point) {
            point.color = colors1[x];
            point.series.color = colors1[x];
        });
        series.redraw();
        $(legends[x]).trigger("click");
        $(legends[x]).trigger("click");
    }

});

Change your screen id.

Regards,
Sunny Singla
ssingla1985@gmail.com
+919855089359

3

Hi @Sunny_Singla ,

Thank you very much for the assist that helped. The only minor issue that seems to be happening now is when you go to another tab and come back it reverts to the default colours.
Your example is also doing the same.
I am guessing because the JS is not being run when just changing menu items? So not sure if that is a Knack thing or a JS thing.

4

Hello Adrian,

Try to call that at view render instead of scene render.

Regards,
Sunny Singla

5

Hi Sunny,

Thank you for the quick response. That doesn’t seem to change the result.
Seems changing menu items doesn’t trigger the view or scene render if it has already done it once.

6

Hello Adrian,

Understand, In that case, you need to call the javascript function when the button is clicked(with settimeout option may be 100ms).

Regards,
Sunny Singla