Types of property 'chart' are incompatible when loading accessibility module

[KulcsRX21]

Types of parameters 'options' and 'options' are incompatible as soon as import 'highcharts/modules/accessibility' is in the React component.

import {
  Legend,
  setHighcharts,
  Tooltip,
  XAxis,
  YAxis,
} from '@highcharts/react';
import { ColumnSeries } from '@highcharts/react/series/Column';
import Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/accessibility';
import 'highcharts/modules/broken-axis';

setHighcharts(Highcharts);

const chartOptions: Options = {
    credits: { enabled: false },
    ...(title && { title: { text: title, ...titleProps } }),
    ...(subtitle && { subtitle: { text: subtitle, ...subtitleProps } }),
  };

  return <Chart options={chartOptions}>{children}</Chart>;

package.json dependencies

  "devDependencies": {
    "@biomejs/biome": "2.3.8",
    "@highcharts/react": "^4.1.0",
    "@instructure/ui": "^10.26.4",
    "@rsbuild/core": "~1.6.14",
    "@rsbuild/plugin-react": "^1.4.2",
    "@rslib/core": "^0.18.4",
    "@storybook/addon-a11y": "^10.1.4",
    "@storybook/addon-docs": "^10.1.4",
    "@storybook/addon-onboarding": "^10.1.4",
    "@storybook/react": "^10.1.4",
    "@types/react": "^19.2.7",
    "highcharts": "^12.4.0",
    "husky": "^9.1.7",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "storybook": "^10.1.4",
    "storybook-addon-rslib": "^3.1.0",
    "storybook-react-rsbuild": "^3.1.0",
    "typescript": "^5.9.3"
  },

[K009]

Hi @KulcsRX21, thanks for pointing this out. With the newer version of the Highcharts React integration, the way modules are imported has changed, which can be a bit confusing at first. Here are the docs: https://www.highcharts.com/docs/react/v4-migration-guide#overview

Here's a working demo: https://stackblitz.com/edit/react-v2jbdrkq?file=index.js

[kristofkulcsar]

Thank you, I have successfully applied the accessibility module for a chart this way :)

But I have another chart which uses BrokenAxis the "old" way (which is the way in the v4 migration guide by the way):

import { setHighcharts } from '@highcharts/react';
import Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/broken-axis';

setHighcharts(Highcharts);

If I add accessibility your way combined with the solution for broken-axis then accessibility is not taking effect and I am still getting the console warning to load it:

import { Accessibility } from '@highcharts/react/options/Accessibility';
...
<Accessibility />

I think the usage of setHighcharts(Highcharts) is blocking the modules loading from @highcharts/react/options correctly, but I could not find BrokenAxis in @highcharts/react/options, so I cannot use it any other way at the moment to make it compatible with the new way of loading modules.

@K009 What do you think, how could I combine accessibility and broken-axis for a chart?
Could you add BrokenAxis to @highcharts/react/options?

[K009]

We can solve this in other way. Here are the docs: https://www.highcharts.com/docs/react/v4-migration-guide#setting-custom-highcharts-instance
And here's the demo: https://stackblitz.com/edit/react-ccud7jmc?file=index.js

[kristofkulcsar]

Okay, it works with JS, JSX but we use TS, TSX.

My initial issue is about incompatibility in the type system of the modules.

Could you make it work using typescript?

It is a standard in our projects to use typescript and we would not want to change our components because of this issue.

[kristofkulcsar]

I am afraid I need to migrate back to highcharts-react-official if this issue cannot be resolved.

[K009]

Thanks for the feedback. You're right that broken-axis module should be added to @highcharts/react/options. We'll evaluate it on our side and come back with an update