Thank you for your response.
Your answer is exactly what I wanted to know and your demos really help me to understand.
However, I am struggling with implementing it in my app, because I use Highcharts in React (with Next.js).
So, it would be really helpful to get more information about changing windbarb marker in React.
---
My code looks like below.
Code: Select all
import * as H from 'highcharts';
import highchartsWindbarb from 'highcharts/modules/windbarb';
import highchartsDatagrouping from 'highcharts/modules/datagrouping';
import { setOptions } from 'highcharts';
import { useEffect, useState } from 'react';
import { Error, LineChart, Load } from '@/components';
export default function ChartPage() {
const [opt, setOpt] = useState<Highcharts.Options>();
const [isError, setIsError] = useState(false);
const [isLoading, setIsLoading] = useState(false);
// hook to setup Highcharts
useEffect(() => {
highchartsWindbarb(H);
highchartsDatagrouping(H);
setOptions({
time: {
useUTC: false
}
});
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// hook to fetch data
useEffect(() => {
(async () => {
try {
setIsLoading(true);
const res = await fetch(url);
const data = await res.json();
// ...
setOpt(options);
setIsLoading(false);
} catch (error) {
console.error(error);
setIsError(true);
}
})();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
if (isError) {
return <Error />;
}
if (isLoading) {
return <Load />;
}
return <LineChart options={opt} />;
}
Code: Select all
import { Chart } from 'highcharts';
import { useEffect, useRef } from 'react';
export default function LineChart({ options }: { options: Highcharts.Options }) {
const container = useRef<HTMLDivElement>(null);
const myChart = useRef<Highcharts.Chart>();
// hook to create chart
useEffect(() => {
if (!container.current) {
return;
}
myChart.current = new Chart(container.current, options);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// hook to update chart
useEffect(() => {
if (!myChart.current) {
return;
}
myChart.current.update(options);
}, [options]);
return <div className="w-100 h-100" ref={container}></div>;
}
---
I read the document about extending Highcharts.
Also, in stackoverflow, there is a thread discussing customization in Angular.
So, I think my code could be something like the following.
Code: Select all
export default function customWrap(H: typeof Highcharts) {
H.wrap(H.Series.prototype, 'windArrow', function(point: WindbarbPoint): (SVGElement|SVGPath) {
let knots = point.value * 1.943844,
// ...
});
}
But how do I access to 'Series/Windbarb/WindbarbSeries.js' ?
Is this the right direction to begin with?
