jqPlot - How to change negative color

Question

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

score 7 · Accepted Answer · answered Mar 29 '11 at 10:23

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);

jqPlot - How to change negative color

1 Answers1