karpi88
Posts: 2
Joined: Mon May 09, 2022 4:08 pm

Place button on specific xIndex

Hello!

I need to place a button on specific xAxis value. My xAxis is of type 'datetime' and my button is added as follows:

Code: Select all

const safetyForms = selectedDriverSafetyForms.get();
    if (safetyForms.length > 0) {
      let xIndex = 0;
      let yIndex = 0;
      _.each(safetyForms, function (form, index) {
        xIndex = chart.plotLeft + 100 + 40 * (index); //Get xIndex for creationDate
        yIndex = chart.plotTop;
        debugger;
        chart.renderer
          .text(
            `<button class="btn btn-floating btn-floating-small b-orange-light-bg right" title="${safetyFormTitle[form.category]} Form"><i class="material-icons">insert_drive_file</i></button>`,
            xIndex,
            yIndex,
            true
          )
          .on('click', function () {
            window.open(`/reports/forms/safety/form/${form.reference}`);
          })
          .add();
      });
The "forms" used to draw each button contains a datetime value which I need to use to place it on the xAxis regardless of having a point in there or not.

The below image represent what I have against what I need
https://ibb.co/BfpbHmf

Hope you can help me :)
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Place button on specific xIndex

Hi karpi88,

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

In that case you should use axis.toPixels method which returns pixels based on passed axis value. That pixel value can later be used to position the button.
Demo: https://jsfiddle.net/BlackLabel/7q4wm8oe/
API reference:https://api.highcharts.com/class-refere ... s#toPixels

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
karpi88
Posts: 2
Joined: Mon May 09, 2022 4:08 pm

Re: Place button on specific xIndex

mateusz.b wrote: Mon May 09, 2022 11:07 pm Hi karpi88,

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

In that case you should use axis.toPixels method which returns pixels based on passed axis value. That pixel value can later be used to position the button.
Demo: https://jsfiddle.net/BlackLabel/7q4wm8oe/
API reference:https://api.highcharts.com/class-refere ... s#toPixels

Let me know if it was what you were looking for.
Regards!

That's exactly what I needed :D
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Place button on specific xIndex

That's great to hear! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”