Chartist-js: Axis titles

[dsbudiac]

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.

[gionkunz]

Text positioning (except multi line stuff) is "easier" to do with SVG from my experience, yes. You have greater flexibility there like rotation, text along a path (very cool and may find it's place in Chartist somewhere :smile: )

I just think the use cases for axis labels in modern chart design are quite limited. Just go to dribbble and search for charts. I believe that a modern and minimal UI should provide already context and grid labels that give the user an immediate impression what the axis are about without causing any confusion.

Of course this is my own opinion, but I think it's aligned with most designers who I spoke to.

Something else we could think of, also helpful for other things that you'd probably add to a chart manually is some sort of an API to add static objects onto the chart surface. This could be used to enrich a chart where it's impossible by HTML / CSS.

[gionkunz]

This should now be no problem to do with the draw events and the annotated markup with namespace attributes. Therefore I'm closing this issue.

[LCid]

Hi Gion,

Could you possibly supply an example of how to add axis titles? Wonderful js library by the way.

Thanks!

[devolkpl]

Great idea, many thanks @dsbudiac

[firstprayer]

It seems Chartist still doesn't support axis title right now, correct? I think this is a very essential function... so it doesn't make sense if it doesn't exist here.

[devolkpl]

That's right however dsbudiac's solution is pretty easy to implement and use

[gionkunz]

I'm reopening this for discussion

[gionkunz]

After further consideration, I'm still not convinced that this should go into the core of Chartist. I just think that placing a simple text to show an axis title is something every web developer should be able to do outside of Chartist. @dsbudiac solution is pretty cool, however he outlines a few important issues specially with rotated text. This could definitely be solved with SVG as text positioning is much better there (except the multi line thing). However, only for this aspect I think it would be a feature bloat to take this into Chartist. In a regular product I'd say it's an essential feature to have legends and axis titles. However, in a web library that builds on the extensibility of HTML, this feature becomes obsolete.

If due to the limitations of text rotation in CSS and missing positioning / layout features related to the drawing in Chartist, I'd recommend someone takes the time to write a Chartist plugin.

Long story short. I'm closing this issue :-))

[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.

[iosdev-republicofapps]

I'd also like to see chart titles if possible .. :-)

And I'd be willing to help if you gave me some pointers as to where to do it and what you think the best approach is!

[adamscybot]

Definite +1. In academia, labelling and titling your graph is basically graphing 101 and absolutely essential every time.

[adarsh]

+1 from me as well, not being able to add axis titles may lead me to choose another library.

[gionkunz]

@adarsh Axis labels are possible using the axis title plugin: http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin

[adarsh]

Ah yes, I found that after some searching.

I've opened a PR to point to the plugins page in
https://github.com/gionkunz/chartist-js/pull/473.

Thanks!

@adarshp http://www.twitter.com/adarshp
313.454.1515 (mobile)
See when I am free: http://bit.ly/adarshcal

On Wed, Sep 30, 2015 at 5:22 AM, Gion Kunz [email protected] wrote:

@adarsh https://github.com/adarsh Axis labels are possible using the
axis title plugin:
http://gionkunz.github.io/chartist-js/plugins.html#axis-title-plugin

—
Reply to this email directly or view it on GitHub
https://github.com/gionkunz/chartist-js/issues/27#issuecomment-144378690
.

[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!