display x-axis and y-axis lines with out the grid lines using flot

Question

I am using flot to display bar charts. When I set the tickLength to 0, it hides the vertical and horizontal lines but it also hides the x-axis and y-axis lines. I need the x-axis and y-axis with out the vertical and horizontal grid lines. Is there a way to do this?

Please see the second chart in the image. That is what I want.

Lexicographer

Answer 1

This trickier than I thought it would be. The only thing I can come up with is to disable the border and axis lines, than add them back in manually:

$(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { xaxis: { from: 0, to: 10 }, yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, yaxis: { from: 0, to: 15 }, color: "#000" }]
        }
      }
    );
});

Produces:

Snuffer

Thanks for this. It helped me with a similar problem--drawing a horizontal zero-axis line across the graph. – Potentiality

Answer 2

Mark answer works but it's a little too hardcoded for his data. This one is a little better:

$(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, color: "#000" }]
        }
      }
    );
});

Still if your chart starts at a value different than 0 you have to manually change the markings.

Judaist

Answer 3

Setting

xaxis: { tickLength: 0 }, yaxis: { tickLength: 0 }

will also hide the grid lines.

Bachman

seems like this is the simple answer that worked for me, thanks =) – Borrowing

Answer 4

For the case of a (0,0) origin, you can fake the axes by just drawing bottom and left border lines:

grid: {
    borderColor: 'black',
    borderWidth: {
        top: 0,
        right: 0,
        bottom: 2,
        left: 2
    },
    ...
}

Jacobina

Answer 5

Try to color the lines in white (or your bg-color)

 yaxis: 
  . . .
  tickColor: "#cccccc" /* or better "#ffffff" */
  . . .

Seasonseasonable