showing x axis below chart #158

Open
Dieterbe opened this Issue Nov 13, 2012 · 5 comments

Projects

None yet

6 participants

@Dieterbe

Hi,
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?

@dchester

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
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
logscape commented Apr 8, 2014

+1

@lucjan
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")
});

Example: http://code.shutterstock.com/rickshaw/examples/x_axis.html

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

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