Reputation: 789
When I change the width of the chart with updateOptions
it is a different width than the initial load, even with same width value.
I am rendering a chart with these very basic initial options:
options: {
id: "chart_id",
chart: {
width: "100%"
}
}
I am rendering the chart with react-apexcharts
as
<ReactApexChart options={options} series={series} type="bar" />
and then to change width I am calling
ApexCharts.exec('chart_id', 'updateOptions', newOptions);
where newOptions is the same as the original options, different width.
but even if I update the options with the same width, it shrinks the plot-series
(the bars) compared to initial load.
first photo - original.
second photo - messed up (in photo, the chart width is the full screenshot but when setting chart width programmatically, the plot series shrinks as shown
Upvotes: 0
Views: 8339
Reputation: 19
// Function to calculate the bar width
function calculateBarWidth(dataPoints) {
const minimumWidth = 10; // Minimum width you want
const calculatedWidth = Math.max(minimumWidth, minimumWidth / dataPoints);
return `${calculatedWidth}px`;
}
import React from "react";
import ReactDOM from "react-dom";
import ReactApexChart from "react-apexcharts";
import "./styles.css";
// Function to calculate the bar width
function calculateBarWidth(dataPoints) {
const minimumWidth = 10; // Minimum width you want
const calculatedWidth = Math.max(minimumWidth, minimumWidth / dataPoints);
return `${calculatedWidth}px`;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
plotOptions: {
bar: {
dataLabels: {
position: "top",
},
columnWidth: calculateBarWidth(1), // Adjust the number of data points
},
},
dataLabels: {
enabled: true,
formatter: function (val) {
return Number(val).toLocaleString() + "€";
},
offsetY: -20,
style: {
fontSize: "12px",
colors: ["#304758"],
},
},
xaxis: {
categories: ["Juin 2018"],
position: "bottom",
labels: {
offsetY: 0,
},
},
fill: {
gradient: {
shade: "light",
type: "horizontal",
shadeIntensity: 0.25,
stops: [50, 0, 100, 100],
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
formatter: function (val) {
return Number(val).toLocaleString() + "€";
},
},
},
title: {
text: "Revenus des 12 derniers mois",
floating: true,
offsetY: 0,
align: "center",
style: {
color: "#444",
},
},
chart: {
animations: {
enabled: false,
},
},
},
series: [
{
name: "Chiffre d'affaires",
data: [8976],
},
],
};
setTimeout(() => {
this.setState({
series: [
{
name: "Chiffre d'affaires",
data: [67], // Adjust the data point value
},
],
});
}, 4000);
}
render() {
return (
<div id="chart">
<ReactApexChart
options={this.state.options}
series={this.state.series}
type="bar"
height="300"
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Upvotes: 0
Reputation: 789
I finally got it fixed, and boy was it a strange fix.
One way that i was able to fix it was by not using react-apexcharts
and instead switching to regular apexcharts
like so
import ApexCharts from 'apexcharts';
componentDidMount() {
new ApexCharts(document.getElementById('chart'), options);
chart.render();
}
render() {
return <div id="chart" />
}
when i did that, the ApexCharts.exec('chart_id', 'updateOptions', newOptions);
calls worked to change the width properly
but i really wanted to use react-apexcharts
so through trial and error i found out that in order for the width to change correctly, I had to do two things:
First - I needed to change the width using the ApexCharts.exec('chart_id', 'updateOptions', newOptions);
method in order for the chart to reload. Simply changing the width
prop directly on the React
component won't work.
Second - and this is the strange part, i needed to initialize a new ApexCharts
object, even if the DOM hook passed to the creator was null. for example, at the top of my document, my 4 apex charts related lines are:
import ReactApexChart from "react-apexcharts";
import options from './chart-data.js';
import ApexCharts from 'apexcharts'
new ApexCharts(null, options);
I have no idea why i needed to do this just to get the chart width to behave properly. not just to update at all, mind you, but just to not have a mind of it's own. Any insight would be great, if anyone knows!
Upvotes: 2
Reputation: 5627
If you are using react-apexcharts
, have you tried setting width directly into component's props?
<ReactApexChart options={options} series={series} width="300" type="bar" />
Next time, when you update the width props, it will automatically redraw to the new width.
If the above doesn't work, please post a working codesandbox demo to reproduce it on our side easily.
Upvotes: 0