How to use react-jsx-highcharts - 10 common examples

import { withSeriesType } from 'react-jsx-highcharts';
export * from 'react-jsx-highcharts';

// Charts
export { default as HighchartsStockChart } from './components/HighchartsStockChart';

// Graph parts
export { default as Navigator } from './components/Navigator';
export { default as RangeSelector } from './components/RangeSelector';
export { default as Scrollbar } from './components/Scrollbar';

// Series
export const CandlestickSeries = withSeriesType('Candlestick');
export const FlagsSeries = withSeriesType('Flags');
export const OHLCSeries = withSeriesType('OHLC');

withHighcharts
} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsGanttChart } from './components/HighchartsGanttChart';

// Graph Parts
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';
export { default as GridColumn } from './components/GridColumn';
export { default as Pathfinder } from './components/Pathfinder';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const GanttSeries = withSeriesType('gantt', parentAxisId);
export const XRangeSeries = withSeriesType('xrange', parentAxisId);

import { withSeriesType } from 'react-jsx-highcharts';
export * from 'react-jsx-highcharts';

// Charts
export { default as HighchartsStockChart } from './components/HighchartsStockChart';

// Graph parts
export { default as Navigator } from './components/Navigator';
export { default as RangeSelector } from './components/RangeSelector';
export { default as Scrollbar } from './components/Scrollbar';

// Series
export const CandlestickSeries = withSeriesType('Candlestick');
export const FlagsSeries = withSeriesType('Flags');
export const OHLCSeries = withSeriesType('OHLC');

} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsMapChart } from './components/HighchartsMapChart';

// Graph Parts
export { default as MapNavigation } from './components/MapNavigation';
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const MapBubbleSeries = withSeriesType('MapBubble', parentAxisId);
export const MapLineSeries = withSeriesType('MapLine', parentAxisId);
export const MapPointSeries = withSeriesType('MapPoint', parentAxisId);
export const MapSeries = withSeriesType('Map', parentAxisId);

withSeriesType
} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsMapChart } from './components/HighchartsMapChart';

// Graph Parts
export { default as MapNavigation } from './components/MapNavigation';
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const MapBubbleSeries = withSeriesType('MapBubble', parentAxisId);
export const MapLineSeries = withSeriesType('MapLine', parentAxisId);
export const MapPointSeries = withSeriesType('MapPoint', parentAxisId);
export const MapSeries = withSeriesType('Map', parentAxisId);

import { withSeriesType } from 'react-jsx-highcharts';
export * from 'react-jsx-highcharts';

// Charts
export { default as HighchartsStockChart } from './components/HighchartsStockChart';

// Graph parts
export { default as Navigator } from './components/Navigator';
export { default as RangeSelector } from './components/RangeSelector';
export { default as Scrollbar } from './components/Scrollbar';

// Series
export const CandlestickSeries = withSeriesType('Candlestick');
export const FlagsSeries = withSeriesType('Flags');
export const OHLCSeries = withSeriesType('OHLC');

Tooltip,
  withHighcharts
} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsGanttChart } from './components/HighchartsGanttChart';

// Graph Parts
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';
export { default as GridColumn } from './components/GridColumn';
export { default as Pathfinder } from './components/Pathfinder';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const GanttSeries = withSeriesType('gantt', parentAxisId);
export const XRangeSeries = withSeriesType('xrange', parentAxisId);

useModifiedProps,
  withHighcharts as withHighmaps,
  withSeriesType
} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsMapChart } from './components/HighchartsMapChart';

// Graph Parts
export { default as MapNavigation } from './components/MapNavigation';
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const MapBubbleSeries = withSeriesType('MapBubble', parentAxisId);
export const MapLineSeries = withSeriesType('MapLine', parentAxisId);
export const MapPointSeries = withSeriesType('MapPoint', parentAxisId);
export const MapSeries = withSeriesType('Map', parentAxisId);

withHighcharts as withHighmaps,
  withSeriesType
} from 'react-jsx-highcharts';

// Charts
export { default as HighchartsMapChart } from './components/HighchartsMapChart';

// Graph Parts
export { default as MapNavigation } from './components/MapNavigation';
export { default as XAxis } from './components/XAxis';
export { default as YAxis } from './components/YAxis';

// Series
const parentAxisId = { axisId: 'yAxis' };
export const MapBubbleSeries = withSeriesType('MapBubble', parentAxisId);
export const MapLineSeries = withSeriesType('MapLine', parentAxisId);
export const MapPointSeries = withSeriesType('MapPoint', parentAxisId);
export const MapSeries = withSeriesType('Map', parentAxisId);

const RangeSelector = ({ enabled = true, children, ...restProps }) => {
  const props = { enabled, ...restProps };
  const [rendered, setRendered] = useState(false);
  const Highcharts = useHighcharts();
  const chart = useChart();
  const axis = useAxis('xAxis');

  useEffect(() => {
    if (!axis) return;

    // Workaround inferred from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.rangeSelector.enabled = true;
    // Initialise RangeSelector (see https://github.com/highcharts/highcharts/blob/dd730ab/js/parts/RangeSelector.js#L1464-L1468)
    Highcharts.fireEvent(chartObj, 'afterGetContainer');

    const opts = getRangeSelectorConfig(props, Highcharts);
    updateRangeSelector(opts, chart);

    const renderRangeSelector = createRenderRangeSelector(chart, axis);
    const axisObj = axis.object;