renderer in React

[user94]

Can we use the renderer in react?
When I try something like this it throws an error that xAxis and yAxis does not exist:
const options = {
chart: {
events: {
render() {
const chart = this;
const xAxisBbox = this.xAxis[0].axisGroup.getBBox();
const yAxisBbox = this.yAxis[0].axisGroup.getBBox();

if (chart.cornerBackground || chart.cornerTitle) {
chart.cornerBackground.attr({
x: yAxisBbox.x,
y: xAxisBbox.y
});
chart.cornerTitle.attr({
x: xAxisBbox.x / 4,
y: xAxisBbox.y + 25
});
} else {
this.renderer.rect(yAxisBbox.x, xAxisBbox.y, yAxisBbox.width, xAxisBbox.height).attr({
fill: 'lightgray',
'fill-opacity': 0.4
}).add();

this.renderer.text('Custom title', xAxisBbox.x / 3 - yAxisBbox.x, xAxisBbox.y + 25).add()
}
}
}

[jakub.s]

Hi,

Thanks for the question!

You can definitely use renderer in chart.events functions.

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

I assume your error is related to some other issue.

I used your config and everything seems to work: https://stackblitz.com/edit/react-95djfg?file=index.js

Could you please reproduce you issue if it persists?

Best regards,
Jakub

[user94]

Thank you for the quick response!
This is the full code i'm working with:
https://codesandbox.io/s/optimistic-gol ... src/App.js

The code works great! Except when it goes through a typescript check that we have it breaks the build with :
Type error: Property 'xAxis' does not exist on type '{ render(): void; }'.

It is also having issues with this.yAxis, this.renderer, and this.points

[jakub.s]

Ahh okay, I understand! You're having TypeScript issues.

But in the link you've sent me I do not see any TS error thrown.

Should there be something? Or did you solve your issue?

You have all the available Highcharts classes & interfaces listed on this website: https://api.highcharts.com/class-reference/classes.list

Keep in mind that not everything in Highcharts works great with TypeScript yet, we're currently working on it. If you want to avoid casting you might need to define some custom interfaces yourself.

I believe that you will solve this problem if you specify that

Code: Select all

const chart: Highcharts.Chart = this;

because if not, then the type of this is taken from the object function render (and I believe that this error stems from this).

However, in the demo you've sent this config is specified in a .js file, not in a .ts file so there's no issue there.

Here's a working TypeScript example: https://codesandbox.io/s/chart-ts-forke ... /chart.tsx


Jakub

[user94]

Ah my mistake, I changed it to typescript for clarity
https://codesandbox.io/s/optimistic-gol ... rc/App.tsx

I added in the chart: Highcharts.Chart but it seems to add in more errors seen in the example
It also throws this error when going through tests done on our end
"Type '{ render(): void; }' is missing the following properties from type 'Chart': axes, chartHeight, chartWidth, container, and 52 more."

Should I only be grabbing the props I need from Highcharts.Chart?

[jakub.s]

Sure, I think I understand what's the issue here.

Highcharst.Chart is an interface which has only the basic Highcharts props for the chart and you're adding to it your custom-rendered SVG elements.

In order to do that, you should create an interface CustomChart which extends Highcharts.Chart which should have the additional properties that you'll be using.

Everything should work correctly then.

Here's a demo: https://codesandbox.io/s/happy-browser-zzgsy8

Let me know if that solves your problem.

Best regards,
Jakub

[user94]

Great! That helped get rid of the cornerBackground and cornerTitle errors.
I was still getting the
Type error: Type '{ render(): void; }' is missing the following properties from type 'CustomChart': cornerBackground, cornerTitle, axes, chartHeight, and 54 more
on const chart: CustomChart = this;

I tried moving the CustomChart around and came up with this:
https://codesandbox.io/s/kind-cdn-mu0z0 ... rc/App.tsx
but it throws an error on axisGroup.

Am I on the right track or is this not a good route to take?

Thanks for all the help!

[jakub.s]

You're right - I don't see the axisGroup defined in the Axis interface (https://api.highcharts.com/class-refere ... harts.Axis).

One solution would be to extend the Highcharts.Axis interface with this axisGroup property, but it may lead you to define some additional types on the way.

But, as Highcharts has no full support for TypeScript yet, I think it would be reasonable to just cast the axis as any.

I believe it'll solve your problem: https://codesandbox.io/s/recursing-hill-1tejvc

Regards,
Jakub

[user94]

Following your code example, along with adding “any” to the formatter cleared all of my errors.

Thank you for all the help!

[jakub.s]

No problem!

I'm glad we figured it out.

Jakub