1. I've tried setting milestone to true/false and everything seems to work correctly. Could you please try to replicate this?
2. The calculation for the graphics is based on these values:
- the 'x' coordinate of the chart
- the 'x' coordinate of the point (maximum left 'x' of the point) relative to the chart
- the width of the point
If you sum these values up you'll get the 'x' coordinate where the point ends.
You can experiment with chart.renderer
on your own to see how exactly does it work.
API: https://api.highcharts.com/class-refere ... t#renderer
Example: https://jsfiddle.net/gh/get/library/pur ... o/renderer
3. You're right, after disabling the main point.graphic
the toolip stops showing up. Instead of disabling the main graphic you can just set a transparent color to the points so that it's still invisible, but Highcharts can find the main graphic.
Here's a demo: https://jsfiddle.net/BlackLabel/pctx1h4n/
4. The solution I've created is not based on default Highcharts options - it's a custom-built solution to your needs:
is the default SVG graphic that you did not want to show - that's why I use point.graphic.hide()
in the beginning
- instead, I create two separate SVGs (graphicStart, graphicEnd) which I render at the ends of the default point.graphic
5. When it comes to point.graphicStart
there's nothing about that in the docs because it's a custom solution - I've created these objects for the purposes of our demo.
If you want to use Highcharts with TypeScript, you should extend the PointOptionsObject
(both of type SVGElement).
: https://api.highcharts.com/class-refere ... ionsObject
Let me know if that answers your questions