Axis titles

Occasionally, it’s not apparent what a given axis/labels is/are referring to. Axis titles help to bring context.

I was hoping to handle axis titles myself outside the chartist.js by using absolutely positioned psuedo elements. For example:

HTML:

 <div class="ct-chart" data-x-axis="My x-axis title" data-y-axis="My y-axis-title"></div>

CSS:

.ct-chart { position: relative; }

[data-x-axis]::before {
  content: attr(data-x-axis);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

[data-y-axis]::after {
  content: attr(data-y-axis);
  position: absolute;
  /* vertical text rotation stuff */
}

But that produces a few problems:

1. Takes axis title elements out of normal flow. In my example, axis titles are absolutely positioned. I could add a margin to the chart element, but that gets especially harry if the axis title needs to wrap to a second line
2. Titles are never truly centered in relation to axis lines. The labels add extra padding to the chart pane.
3. Reliably positioning y-axis rotated text is a huge pain… if not impossible. I can’t seem to find a way to position the title reliably. Especially if the y-axis title needs to wrap to a second line.

My SVG text positioning knowledge is quite limited, but I would think this problem would be better handled in SVG over HTML/CSS.

[LCid]

I must disagree with you @gionkunz, this is an extremely essential function for any charting library, no matter what it’s built on. In fact, I loved your library and started using it until I found this issue. Doing it in HTML is a pain because the browsers handle rotation differently, and if we’re using your library we obviously don’t have time to learn all of SVG, or we’d just make the graphs in SVG ourselves! That’s why we use libraries: to save time by not needing to reinvent the wheel.

Long story short: this is the reason my team and I decided to not use your software. In part this specific function but also because you obviously don’t listen your own user base who tells you it’s needed. Nobody wants to use a library where you have to write your own plugin just to get basic functionality.

[poshaughnessy]

Hi. I’m also looking for labels, but just labelling the axis doesn’t help when you have multiple series lines on one graph?

I could just add separate labels myself underneath, but is there a better way to get the right colours used for the lines, except just hardcoding them?

Update: Sorry I think I am over-complicating it. I can either just use the colours Chartist chooses, or override them using CSS. No problems. Thanks!