Skip to content
Jakub Hampl edited this page Nov 7, 2019 · 1 revision

How do I change the color/font/appearance of axes?

  • Use CSS: For most simple changes use CSS. As the docs mention, the HTML structure is considered a stable part of the API contract and won't change between minor/patch versions. For example, if you would like to make the ticks green and the font Comic sans, you could do:

    .tick line {
       stroke: green;
    }
    
    .tick text {
       font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
  • Build it yourself: The provided Axis module is not meant to be the final word on all possible axes. It is intended as a time saver for the common and tedious types of axis. You may easily find yourself in a situation where the above CSS customizations are not sufficient. In that case you can simply build your own Axis. The provided module also only uses elm-visualization's public APIs, so it is entirely possible to just build it yourself. You can see an example here, where we build a custom radial axis.

Clone this wiki locally