While working at Sigsense Technologies, I was badly stuck with unseen customization of Highcharts graph.
Highcharts graph needed to be made bi-directional, which meant end-users being able to draw different types of plots using their mouse.
In addition, already-drawn plots were to be resized by the end-users’ dragging of the plot edges. (you could notice the colorful pillars from the above figure)
Given the primary purpose of Highcharts, it implied heavy customization and an elaborate manipulation of the available interfaces to the graph.
Google it! That was my first response to this challenge.
It was not very successful, as there were no such use cases discussed or answered publicly.
So there came the realization -
I need the top-down approach
Here’s how I broke the issue down to smaller pieces.
At the end of the day, the challenge boiled down to resolving 3 leaf issues :
- Catch mouse events on Highcharts canvas
- Add plots after the graph is rendered
- Remove plots after the graph is rendered
See the Pen Highcharts draw on-the-fly by danny liu (@zixingliu) on CodePen.
Then, with the issue broken down to tangible, atomic and easy-to-solve pieces, I did the dreaded and contributed to the original value of the product.