showing x axis below chart #158

Dieterbe opened this Issue Nov 13, 2012 · 5 comments


None yet

6 participants


is it possible to show the x axis beneath (outside of) the chart, like you can do with the y-axis?
the numbers on the x-axis keep clashing with my graphs. interestingly i couldn't find any mention of this in the documentation?


The x-axis labels are positioned with CSS, so while it's not completely ideal, something like this might work for you:

.rickshaw_graph .x_tick .title {
    bottom: -24px;
    left: -18px;

There's also a pull request (#73) that implements an x-axis like the y-axis one, which may or may not work for what you want.

rr326 commented Mar 14, 2014

Hi - this is perfect. One suggestion - put this on your sample website. I would think many people would want charts with a below-the-chart axis, and finding this solution was hard!

logscape commented Apr 8, 2014


lucjan commented Jun 15, 2015

Creating an element to serve as a container for the x-axis and pointing to it with orientation set to bottom seems to be doing the trick:

var xAxis = new Rickshaw.Graph.Axis.X({
  graph: graph,
  orientation: "bottom",
  element: document.querySelector("#my-x-axis-container")


@niemyjski niemyjski referenced this issue in exceptionless/Exceptionless.UI Feb 17, 2016

Add x-axis ticks and labels to charts #69

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment