Code: Select all
import { YAxisOptions } from 'highcharts';
declare module 'highcharts' {
interface IGroupedCategory {
name: string;
caregories: string[];
}
export interface YAxisOptions<D extends object> {
categories: string[] | IGroupedCategory;
}
}
https://ibb.co/F3PfXS4
The configuration of settings for the chart is attached below.
Please tell me the general type of graph for explicit typing it in ref.
Code: Select all
import React, { FC, useRef } from 'react';
import Highcharts, { Options } from 'highcharts';
import HighchartsGantt from 'highcharts/modules/gantt';
import HighchartsReact from 'highcharts-react-official';
import CategoriesPlugin from 'highcharts-grouped-categories';
import CustomEvents from 'highcharts-custom-events';
import { mockData } from './Chart.constants';
CustomEvents(Highcharts);
HighchartsGantt(Highcharts);
CategoriesPlugin(Highcharts);
const Chart: FC = () => {
// What type should I replace the any type with?
const chart = useRef<any>(null);
const options: Options = {
chart: {
animation: false,
type: 'xrange',
panning: {
enabled: true,
type: 'x',
},
panKey: 'shift',
},
series: [{
type: 'xrange',
data: mockData,
dataLabels: {
enabled: true
},
}],
title: {
text: 'Car Rental Schedule'
},
tooltip: {
pointFormat: '<span>Rented To: {point.rentedTo}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
},
navigator: {
height: 100,
enabled: true,
handles: {
enabled: false,
},
yAxis: {
min: 0,
max: 60,
},
series: {
dataLabels: {
padding: 0,
}
}
},
rangeSelector: {
enabled: true,
},
yAxis: [{
tickWidth: 1,
categories: [{
name: 'America',
categories: ['USA', 'Canada', 'Mexico']
}, {
name: 'Europe',
categories: ['1', '2', '3']
}]
}],
};
return (
<>
<HighchartsReact
constructorType="ganttChart"
highcharts={Highcharts}
options={options}
ref={chart}
/>
</>
);
};
export default Chart;