Search code examples
flot

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


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.enter image description here


Solution

  • 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:

    enter image description here