Multi-Axis color

[ruiribe]

Hi, I am trying to draw a multi-axis chart in which each Y axis has a different colour. but I get the following result:

I am able to change all of the chart y Axis colours except the first (right side). The colour I apply to that axis is applied to the inner grid (brown).

I am using the following code:

options = PlotOptions.create(); model = new PlotModel();

options.setLegendOptions(LegendOptions.create().setShow(false)); AxisOptions axisOptions1 = AxisOptions.create().setShow(true).setPanRange(false).setZoomRange(false).setPo sition(AbstractAxisOptions.AxisPosition.RIGHT).setColor("brown"); AxisOptions axisOptions2 = AxisOptions.create().setShow(true).setPanRange(false).setZoomRange(false).setPosition(AbstractAxisOptions.AxisPosition.LEFT).setColor("red"); AxisOptions axisOptions3 = AxisOptions.create().setShow(true).setPanRange(false).setZoomRange(false).setPosition(AbstractAxisOptions.AxisPosition.RIGHT).setColor("green"); AxisOptions axisOptions4 = AxisOptions.create().setShow(true).setPanRange(false).setZoomRange(false).setPosition(AbstractAxisOptions.AxisPosition.LEFT).setColor("yellow");

    options.addYAxisOptions(axisOptions1);
    options.addYAxisOptions(axisOptions2);
    options.addYAxisOptions(axisOptions3);
    options.addYAxisOptions(axisOptions4);

options.addXAxisOptions(TimeSeriesAxisOptions.create().setShow(true).setLabel("Eixo X").setZoomRange(1000, Double.MAX_VALUE));

    options.setZoomOptions(ZoomOptions.create().setInteractive(true));
    options.setPanOptions(PanOptions.create().setInteractive(true));

    GridOptions gridOptions = GridOptions.create();

    plot = new DroppableSimplePlot(model, options)

[nmorel]

Looks like a bug in flot (or normal behaviour ? With one axis, you would prefer the color to be applied inside grid). I obtain the same result with their axes-multiple example. You should discuss this problem on their issue tracker. Just use the axes-multiple example contained in the zip file as a reproducible example of your problem.

yaxes: [ { min: 0, color: "red" }, {
    // align if we are to the right
    alignTicksWithAxis: position == "right" ? 1 : null,
    position: position,
    tickFormatter: euroFormatter, color: "yellow"
} ],

[nmorel]

You can also do a little trick. Add 2 additionnal y axis that won't be visible :

Always from the axes-multiple example :

$.plot("#placeholder", [
    { data: [] },
    { data: [], yaxis: 2 },
    { data: [[1220824800000,0.7010], [1215986400000,0.62760]], yaxis: 3, color: "red" },
    { data: [[1218837600000,0.67840], [1220306400000,0.68320]], yaxis: 4, color: "blue" },
    { data: oilprices, label: "Oil price ($)", yaxis: 5, color: "green" },
    { data: exchangerates, label: "USD/EUR exchange rate", yaxis: 6, color: "yellow" }
], {
    xaxes: [ { mode: "time" } ],
    yaxes: [ 
        { labelWidth: 4 }, 
        { labelWidth: 0, position: "right" }, 
        { min: 0, color: "red" }, 
        { min: 0, color: "blue", position: "right", reserveSpace: true }, 
        { min: 0, color: "green" }, 
        {
            // align if we are to the right
            position: "right",
            tickFormatter: euroFormatter, color: "yellow"
        } 
    ],
    legend: { position: "sw" }
});

And a small css rule to make the label invisible :

.y1Axis, .y2Axis, .y1Axis .tickLabel, .y2Axis .tickLabel {
    display: none;
}

[ruiribe]

Hi nmorel,

Thanks for the quick reply. I'll only be able to test you´re suggested trick on monday. I'll also submit the bug to flot issue tracker.

Rui