On a serpentine chart, I put 2 small Rectangles adjacent to the start and end of the Curved Axis. Both Rectangles are:
- children of a Container who's parent is the Chart
- placeholders for svg icons (e.g. race flags for start and finish respectively)
- identified by class name using their Container's id property
I need these icons to stay beside the Curved Axis start and end points. On smartphones this is easy, since a minimum chart size can be used and scrolling is fine.
On full-screen, the chart stretches up too much and the icon positions change. Using percent based positioning helps, but not enough. Despite many attempts I can't seem to affect the icons with the css class amcharts-finishFlag.
I'd appreciate any help applying ccs properties, or even a better way of aligning the blue Rectangles so that Viewport height does not change their relative position.
Here is my codepen:
codepen.io/Owen-MacWilliam/pen/JjzKXoo
Amcharts 4 using Chrome web browser
Two amcharts tutorials I have based some of my code off:
- amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/
- amcharts.com/docs/v4/tutorials/freeze-horizontal-axis/
I have tried using Amcharts percent function to position the Rectangles, but this did not remove the issue. I followed the instructions in amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/, which did not work. Changing the icon's parent container to another div, the AxisContainers, etc. did not help. From Chrome's inspection tool, I cannot seem to "style" the Rectangles in any way that is useful. For instance I can change the image dimensions, but their position never changes.