Hi Dominik, thanks for your response. I appreciate your time.
"Could you describe your requirement more precisely? Maybe I'll be able to help you more.
"
Yes. Our optimal solution would be to allow the user to hover over a label, see a pencil icon next to the label, click it, then see the label inside an input field. They can then change the label text, press enter & save the new label. A "hacked" POC can be seen below.
After spending yesterday doing research into the feasibility of this concept with HighCharts I found HC does not:
- have events handlers for click and hover mouse events on X-axis chart labels
- does not allow the use of label.formatter to render an input field within a label for the user to interact with. http://jsfiddle.net/scottbrooksamplitude/meg73x1L/ (POC showing an INPUT field will not render in a label). I believe this is due to labels with useHTML on only render a subset of HTML elements.
So this leads me to believe I only have 2 options:
- turn off x-axis labels and render my own custom component with the described behavior. The question with this is how would the custom component know where to render the labels for any given chart with any given # of charts and labels?
Along those lines:
"We can check the coordinates of where the labels are rendered by referring to e.g chart.series[0].data[0].plotX/plotY value."
Great. Thanks for this. Is there a more intuitive way to determine where we would render our own custom labels in the proper locations along the x-axis?
Maybe similar to how HighCharts does it internally? ie. for X # of column/bar charts on a graph with X categories, we render the labels every X pixels from the left-most edge of the chart.
Many thanks!
Scott D Brooks