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:
chart.plotLeft - the 'x' coordinate of the chart
point.plotX - the 'x' coordinate of the point (maximum left 'x' of the point) relative to the chart
point.shapeArgs.width - 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:
-
point.graphic 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 and
point.graphicEnd 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 with
graphicStart and
graphicEnd (both of type SVGElement).
Interface
API:
https://api.highcharts.com/class-refere ... ionsObject
Let me know if that answers your questions
Best regards,
Jakub