Format options with components

React components and JSX

It is possible to use React components and JSX elements as children of certain option components:

function TitleFormat({ country }) {
    return (
        <>Fruit consumption in <em>{country}</em></>
    );
}
function ChartComponent() {
    const countryData = {
        Norway: [
            ['Apples', 1],
            ['Pears', 2],
            ['Bananas', 3],
            ['Oranges', 4]
        ],
        Sweden: [
            ['Apples', 2],
            ['Pears', 1],
            ['Bananas', 5],
            ['Oranges', 1]
        ]
    };
    const [
        country,
        setCountry
    ] = useState(Object.keys(countryData)[0]);
    return (
        <div>
            <Chart>
                <Title>
                    <TitleFormat country={country} />
                </Title>
                <XAxis type="category" />
                <Series type="column" data={countryData[country]} />
            </Chart>
            <CountrySelect
                currentCountry={country}
                countryData={countryData}
                onChange={(c) => setCountry(c)}
            />
        </div>
    );
}

See the full example here.

Option binding

If you want to bind specific elements within your component to specific options, you can use the data-hc-option attribute. This attribute allows you to specify which sub-option the element should be bound to. Here's an example:

function TooltipFormat() {
  return (
    <>
      <div data-hc-option="headerFormat">
        <strong>{'Series {series.name}'}</strong>
      </div>
      <div data-hc-option="pointFormat">
        {'X: {point.x}, Y: {point.y}'}
      </div>
      <div data-hc-option="footerFormat">
        <em>Footer text</em>
      </div>
    </>
  );
}
function ChartComponent() {
  return (
    <Chart>
      <Series type="column" data={[1, 2, 3]} />
      <Tooltip>
        <TooltipFormat />
      </Tooltip>
    </Chart>
  );
}

Note: The data-hc-option attributes links the elements to tooltip.headerFormat, tooltip.pointFormat, and tooltip.footerFormat.

Custom HTML Rendering

By default, the integration uses a lightweight built-in function to convert React elements to HTML strings when processing React components as children of chart option components. This serves as an alternative to React's renderToStaticMarkup from react-dom/server, avoiding the need to bundle React's server rendering package and keeping your application's bundle size minimal.

If you need different rendering behavior, you can provide a custom renderer via the renderToHTML prop. This accepts any function that takes a React element and returns an HTML string, including renderToStaticMarkup itself:

import { renderToStaticMarkup } from 'react-dom/server';
<Chart renderToHTML={renderToStaticMarkup}>
  <Series type="column" data={[1, 2, 3]} />
  <Tooltip>
    // Custom HTML Rendering
    <TooltipFormat />
  </Tooltip>
</Chart>

Caveats

As the components within the chart are parsed statically into Highcharts options, state changes within custom components will not be reflected.

Not all option components supports child components. See Appendix A for an overview.

See also

A complete example combining multiple option components: