scottbrooksamplitude
Posts: 10
Joined: Tue Mar 02, 2021 6:45 pm

xAxis Label inline editing

Hi HighChart team! Love what you guys do!

We're looking to allow users to overwrite the labels on the xAxis. I looking into adding custom labels that contained HTML inputs, but it appears only a subset of HTML is allowed in labels and inputs are not one of them.

So as an alternative, I am investigating overlaying my own custom xAxis labels component on top of the xAxis to provide this functionality. My problem is that I can't seem to find a way to get the positions of the labels on the axis so I know where to render the new labels.

Is there a way to determine where the labels are rendered? I think I came across some docs on determining the scale of the xAxis, but I wasn't clear on how to use that information to figure out where the labels were positioned.

Thanks in advance for any help you might be able to give!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: xAxis Label inline editing

Hello scottbrooksamplitude!

Welcome to our forum and thanks for contacting us with your question!

We can check the coordinates of where the labels are rendered by referring to e.g chart.series[0].data[0].plotX/plotY value. I'm not sure why putting HTML code inside label.formatter doesn't meet your expectations. Could you describe your requirement more precisely? Maybe I'll be able to help you more. :)

API references:
https://api.highcharts.com/highcharts/x ... .formatter

Demo:
https://jsfiddle.net/BlackLabel/jnks9bgp/

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer
scottbrooksamplitude
Posts: 10
Joined: Tue Mar 02, 2021 6:45 pm

Re: xAxis Label inline editing

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
scottbrooksamplitude
Posts: 10
Joined: Tue Mar 02, 2021 6:45 pm

Re: xAxis Label inline editing

Looking at your demo link:
https://jsfiddle.net/scottbrooksamplitude/v204d5ht/1/
the plotX relates to the data point of the line.

I also tried this for grouped bar/colum charts:
https://jsfiddle.net/scottbrooksamplitude/380pf4k5/
and the use of plotX seems to hold up.

Is there a way to determine the width of the chart group above the label? Maybe it's just halfway to the next xPlot value?
scottbrooksamplitude
Posts: 10
Joined: Tue Mar 02, 2021 6:45 pm

Re: xAxis Label inline editing

Created a small test to visualize where the xPlot values for each data point is:
https://jsfiddle.net/scottbrooksamplitude/a4skvmp9/
The lines are not showing up where I'd expect them to be. I would have thought they'd show up in the middle of each label.

Any ideas on how I'd get either center point or better yet, the leftmost/rightmost extremes of the space for each label?

--

On second thought, this appears to be the middle point for the [0] series on the bar/column chart. Ok, I think I can just find the center point for the two bars here and then just do another calculation to determine the center point between groups.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: xAxis Label inline editing

Hi again!

Thanks for the explanation!

Regarding rendering lines in the middle of each label I would do exactly the same as you wrote. :)

Regarding event handlers on axis labels, we can add them by importing a customEvents.js plugin that allows us to create a click event on xAxis labels: https://blacklabel.github.io/custom_eve ... mEvents.js

Demo:
https://jsfiddle.net/BlackLabel/r2mpokd6/

Best regards!
Dominik Chudy
Highcharts Developer
scottbrooksamplitude
Posts: 10
Joined: Tue Mar 02, 2021 6:45 pm

Re: xAxis Label inline editing

Thanks dominik!

RE: customEvents.js plugin, it doesn't support mouseover and mouseout events for the xAxis, so it won't work for our needs.

Overall I think I've got what I need to implement a custom component! Thanks for the plotX tip! That was a huge help.

Regards,
Scott D Brooks
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: xAxis Label inline editing

Hi again!

All right, I was happy to help you. :)

In case of any further questions, feel free to contact us again.
Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Usage”