Search code examples
javascriptjqplot

How to set bar color of jqplot chart depending on x axis tick value?

I want to color the bars in the range of certain x axis ticks in a different color than the others bars like so: enter image description here

var plot = $.jqplot(id,
            [werteProzentual],
            {
                seriesColors:
                    [
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#0066cc",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff",
                        "#99ceff"
                    ],
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    pointLabels: { show: true },
                    rendererOptions: { varyBarColor: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: wertgruppen,
                        label: "RR-Intervalle in Sekunden",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    },
                    yaxis: {
                        min: 0,
                        max: largestAmount,
                        tickOptions: {
                            formatString: "%d"
                        },
                        tickInterval: 5,
                        label: "Anteil in %",
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                    }
                },
                //...
                highlighter: { show: false },
                //...
            });

werteProzentual is an array with the series data.

wertgruppen is an array with the tick values.

Right now it is hard coded, but I want to be able to declare a range of x axis ticks that will have the different bar color because the x axis will be dynamic in the future.

I need to be able to color the bars in the range from say 0.75 to 1.05 differently regardless of how many ticks there are on the x axis.

Solution

  • I found a solution to my problem:

            //color x axis range from 0,75-1,05 in different color
        var specialTicks = ["0,75", "0,8", "0,85", "0,9", "0,95", "1", "1,05"];
        for (var i = 0; i < plot.seriesColors.length; i++)
            plot.seriesColors[i] = "#99ceff";

        for (var i = 0; i < specialTicks.length; i++)
            plot.seriesColors[plot.axes.xaxis.ticks.indexOf(specialTicks[i])] = "#0066cc";

    The seriesColors property when initializing is not needed for this solution. This happens after initialization.