Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jqPlot - How to change negative color

I am using jqPlot to draw an area graph with series defaults fill: true, fillToZero: true with useNegativeColors default to true. I can change the color and fillColor but I did not find a way how to change the line color or fill color below zero x-axis line. I want a positive value with green color and a negative value red color. Currently negative value default to blue. Here is the jqPlot option:

var chartOptions = {
    title: { show: false },
    axesDefaults: {
        show: false,
        showGridline: false,
        borderWidth: 0,
        showTicks: false,
        showTickMarks: false,
        tickOptions: {
            show: false,
            showLabel: false,
            showMark: false,
            showGridline: false
        }
    },
    axes: {
        xaxis: { min: 0, max: 10 },
        yaxis: { min: -5, max: 5 }
    },
    seriesDefaults: {
        fill: true,
        fillToZero: true,
        fillAndStroke: true,
        color: "rgba(190,230,110, 0.8)",
        fillColor: "rgba(206,236,145, 0.8)",
        shadow: false,
        showMarker: false,
        lineWidth: 1,
        rendererOptions: {
            highlightMouseOver: false
        }
    },
    legend: { show: false },
    grid: {
        drawGridLines: false,
        background: "rgba(255,255,255,0)",
        shadow: false
    }
};

Edit: Add info: currently negative value default to blue

like image 348
CallMeLaNN Avatar asked Mar 25 '11 09:03

CallMeLaNN


1 Answers

I just found it in source code some thing like:

this.negativeSeriesColors = [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", "#959E5C", "#C7AF7B", "#478396", "#907294"];

It is mention in the fillToZero example: http://www.jqplot.com/tests/fillToZero.php

The fillToZero series option will create a chart where lines or bars are filled down or up toward the zero axis line. The portion of the line below zero will be shaded darker than the portion above zero. These colors can be customized with the "negativeSeriesColors" option. Positive values are colored according to the "seriesColors" option.

but don't have in the documentation all available options.

So I add the negative color like this:

var chartOptions = {
    ...,
    negativeSeriesColors: ["#F94545", ...],
};
$.jqplot('chart1', data, chartOptions);
like image 56
CallMeLaNN Avatar answered Sep 24 '22 21:09

CallMeLaNN