Adding button functionality in title

[GeorgeCodeHub]

I'm trying to use Highcharts in a React project were I have the need to have buttons inside my chart in very specific locations. One is in the title and the other will be in the pop-ups. For some reason, however, I am unable to call the function outside. Should I put it in a parent component or is there any other method to pass it in Highcharts?

Below is the code of an example I have created and a Stackblitz link:

import React, { Component } from 'react';
import { render } from 'react-dom';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts';

class LineChart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // To avoid unnecessary update keep all options in the state.
      chartOptions: {
        xAxis: {
          categories: ['A', 'B', 'C'],
        },
        title: {
          useHTML: true,
          text: "<button onclick="javascript:testUp();">Click Me</button>"
        },

        series: [
          { data: [1, 2, 3] }
        ],
      },
      hoverData: null
    };
  }

  testUp = () => {
    console.log("Clicked.")
  }

  render() {
    const { chartOptions, hoverData } = this.state;
    
    return (
      <div>
        <HighchartsReact
          highcharts={Highcharts}
          options={chartOptions}
        />

      </div>
    )
  }
}

render(<LineChart />, document.getElementById('root'));

Link for example: https://stackblitz.com/edit/text-in-object

[ppotaczek]

Hi @GeorgeCodeHub,

Thank you for contacting us!

In the below script the testUp function is looked for in a global variable where it is not defined.

<button onclick="javascript:testUp();">Click Me</button>

Please check the possible solution with portals: https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element

Best regards!

[GeorgeCodeHub]

Hello there,

That solution is very close to what I am trying to do. However, I'm not sure which value should I replace for the title. When I try to console.log(chart.title) I get the following.

SVGElement {element: HTMLSpanElement, height: undefined, opacity: 1, renderer: SVGRenderer, SVG_NS: "http://www.w3.org/2000/svg"…}
element: 
<span class="highcharts-title" data-z-index="4" style="position: absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; font-size: 18px; white-space: nowrap; margin-left: 0px; margin-top: 0px; left: 345.5px; top: 7px; color: rgb(51, 51, 51);">Chart title</span>
height: undefined
opacity: 1
renderer: SVGRenderer
SVG_NS: "http://www.w3.org/2000/svg"
symbolCustomAttribs: Array[11]
width: undefined
textSetter: function () {}
opacitySetter: function () {}
visibilitySetter: function () {}
addedSetters: true
rotationSetter: function () {}
alignSetter: function () {}
ySetter: function () {}
xSetter: function () {}
afterSetters: function () {}
textStr: "Chart title"
doTransform: false
x: 389
y: 24
alignOnAdd: true
styles: Object
css: function htmlCss() {}
add: function () {}
textAlign: "center"
zIndex: 4
parentGroup: undefined
added: true
hasBoxWidthChanged: false
xCorr: -43.5
yCorr: -17
cTT: ",center,Chart title,714px,center"
oldRotation: undefined
oldAlign: "center"
update: function () {}
textWidth: "714px"
alignOptions: Object
alignByTranslate: false
alignTo: "spacingBox"
placed: true
alignAttr: Object
<constructor>: "SVGElement"

I tried replacing the element value but I saw no changes. Should I try and replace more than one item to see the preferable result? For instance the cTT and the textStr?

Thank you for your time.

[ppotaczek]

Hi @GeorgeCodeHub,

You need to enable the useHTML option for a title and render a button through portal in title.element.

    title: {
      text: "",
      useHTML: true
    }

Live demo: https://codesandbox.io/s/highcharts-react-demo-v22pd?file=/demo.jsx

[GeorgeCodeHub]

That did the trick. Thank you so much and thank you for creating an example!!!

[hc0503]

@GeorgeCodeHub , can we put component into the title?
This is the design.

[ppotaczek]

Hi @devdreamsolution,

Yes, it is possible by using portals. Please check this thread: #23

and docs: https://github.com/highcharts/highcharts-react#how-to-add-react-component-to-a-charts-element

[hc0503]

@ppotaczek , the title doesn't have formatter.
could you share me the title component sample code?

[ppotaczek]

@devdreamsolution, It doesn't matter, the general concept is the same - you just need to use portals to place some React component in a HTML element created by Highcharts chart.

Live demo: https://codesandbox.io/s/highcharts-react-demo-dndwnu?file=/label.jsx

[hc0503]

@ppotaczek , great works,
thank you for your helping.