Search code examples
flot

Show flot timeline ticks on both top and bottom


I have been using flot for a couple days and its great, but I can't seem to find an answer to this:

Is it possible to display the xaxis/timeline ticks on both the top and bottom of my chart?

My chart has a large height and it's hard for the user to know which date the points are on when scrolling away from the top where the time ticks are currently displayed.

I searched around and all I found was this one issue on github which appears to have never been implemented: https://github.com/flot/flot/issues/1040

Thanks in advance!


Solution

  • You can't do that with the default options, but it is possible with a workaround:

    • Duplicate your data series, use the normal options plus xaxis: 1 for the first one while making the second one invisble with this options:

      points: {
          show: false
      },
      lines: {
          show: false
      },
      xaxis: 2
      
    • Use this options for the x axes:

      xaxes: [{
          position: "top"
      }, {
          position: "bottom",
          alignTicksWithAxis: 1
      }],
      

    See this fiddle for a full example.