Search code examples
jquerycssjqplot

jQplot Bar Colours Are Wrong With Negative Values

See the attached image, the bar colours are wrong when there are values 0 or below. I have the code set like this:

seriesColors:['#09c700','#ff0000','#3854ff']

negativeSeriesColors:['#09c700','#ff0000','#3854ff']

It seems when a value is 0 or lower it skips the colour. My colour settings are set so the first bar should be green, the second red and the third blue, but you can see it's made the second bar (middle) blue and the last one red and this only happens because the middle bar is a negative value.

enter image description here

Solution

  • This is because it's using "negative" colors, which are separate from your defined "positive" colors. You can disable the negative colors with useNegativeColors: false on the series render options.

    $(document).ready(function(){
    var line1 = [['Nissan', 4],['Porche', -6],['Acura', 2]];
 
    $('#chart').jqplot([line1], {
        title:'Bar Chart with Custom Colors',
        seriesColors:['#09c700','#ff0000','#3854ff'],
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                varyBarColor: true,
                fillToZero: true,
                useNegativeColors: false
            }
        },
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<div id="chart"></div>