vBar labels intersect if too many labels or labels too long

[OwenOKI]

Visualization.zip
In the event a vertical bar chart shows lots of bars, or the x-axis labels are long, the labels will tend to collide, and become illegible.

The obvious solution is to rotate the the labels.

I was able modify the Visualization.Axis module to allow for rotation of the labels, but unfortunately my quick hack also rotated the tick marks. Obviously my solution is insufficient but I think I am on the right path. Hopefully the authors can figure out a way to separate the rotation of the tick marks from the rotation of the text.

Attached is my sample elm (I started from BarChart.elm) which demonstrates what will happen when there are too many bars and the labels intersect, and also provides the source code I used to rotate the labels.

To accomplish this, I added a new orientation, (BottomRot Int) and handled that option as shown below:

        translateX point =
            "translate(" ++ toString (position point) ++ ", 2) rotate(-30)"

        translateRotX deg point =
            "translate(" ++ toString (position point) ++ ", 2) rotate(-" ++ toString (deg) ++ ")"

If you can figure out a better way of preventing the labels from intersecting, I would welcome that solution, but this is the solution which appeared obvious to me.

(oops, appears I forgot to remove the rotate -30 from the translateX point option. The correct translateX case should be unmodified from the original, and thus not contain a rotate.)

[OwenOKI]

I was able to figure out how to separate the tick drawing from the label drawing. Now only the labels rotate. Not sure that all my hard coded values are always appropriate, didn't do enough testing, but here is the code if you would like to see what can be done with rotated x-axis labels.

Visualization.zip

Also added some long x-axis labels to emphasize the problems which can be created without a rotated x-axis label.

[gampleman]

The best solution is to use CSS to modify the tick marks.

Something like

.tick text {
  transform: rotate(-30deg);
}

should get you on the right track.

---

Questions are best asked on the elm-lang slack in the #visualization channel, (for next time :) )