score:1
Accepted answer
You need to call chart.reflow
method in onResizeStop
event callback function.
return (
<Rnd
...
onResizeStop={(e, direction, ref, delta, position) => {
const chart = this.chartComponent.current?.chart;
if (chart) {
chart.reflow();
}
...
}}
>
...
</Rnd>
);
From Highcharts API:
reflow( [e])
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
Live demo: https://codesandbox.io/s/cranky-hoover-cz-czw5k?file=/src/index.js
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow
Source: stackoverflow.com
Related Query
- Highcharts automatic resize using drag/resize react-rnd library
- Resize highcharts using react-grid-layout not working
- Library duplication issue using Highcharts in Jaspersoft Studio
- Only one highcharts using react-grid-layout can resize
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Resize High Charts based on grid layout width and height using react
- How to scale Highcharts height on window resize with React
- How to draw a bubble map with longitude and latitude using Highcharts in react
- Local Angular library using Highcharts breaks in production mode
- using library highcharts with asp.net mvc 3
- Highcharts display label for pie chart using html table as data source
- Simple, Open source PHP wrapper for Highcharts library
- Update series using Highcharts React wrapper
- How to show 12AM and 12PM on x-axis using highcharts library
- Pie chart slice radius using HighCharts library
- how to render multiple line charts - highcharts on same page using highcharts react wrapper - highcharts-react-offical
- HTML table as data source for highstock charts using highcharts
- Uncaught Error: Highcharts error #17 while creating sunburst chart using react
- Using a flask variable as data source for highcharts
- why is afterSetExtremes function being called twice highcharts using react
- How can I achieve this using HighCharts library
- Highcharts resize chart size using custom export button and replace expand and collapse button dynamically
- Using Highcharts with SPServices jQuery library to create Pie Chart
- Combining drag of jquery to change highcharts Height using CSS
- How can i change the color of a tile which was clicked of a treemap in highcharts using react
- Removing event Listeners in react using highcharts
- ReferenceError: Highcharts is not defined when using lollipop series in react
- Get max of x axis in highcharts using react
- Display Google spreadsheet data using Highcharts library
More Query from same tag
- Add new series to the top of a highcharts stacked column chart
- Highcharts: incorrect column placement with linked series?
- Problem with request google sheets with Highcharts error 404
- Yii2 - Connect to database inside Controller Action
- Highstock and null values
- Double X-axis within same Highchart object
- Highcharts with angular2 and SystemJS Setup
- How to remove the data-range sign if the data is zero on y axis of highcharts?
- y-axes misaligning in highcharts after zooming in
- Highcharts - add additional export options without losing default ones
- Correct approach to apply HTML style in x-axis title
- Highcharts view full screen in older version
- Loading variwide chart from Highcharts library in Angular 2+
- How to update data table on data change highcharts
- Calculate percentage dynamically on click of legend
- Highstock Flags Series with stacked data
- get data from hashmap into highcharts
- Is there support for subplots in highcharts as in plotly?
- Highcharts - Column chart customization
- Flowing Merge of points with same x-axis in the same series
- Highstock charts - Show the blank space up to the current date
- GWT Highchart comparing series
- Highcharts with shared and split tooptip, Is there any possible to style the hover xAxis labels?
- HighCharts Pie chart gets box around selected slices
- How to remove columns space in column chart
- Start scrollbar at the left for Highstock
- sort of highchart's map by parameters
- combine column and splines highcharts using mysql
- How to extend X axis datetime in Highchart
- How can I pass values from Highcharts event callbacks (click, mouseOver, mouseOut) back to React component member function?