I am currently working on a bar chart component using ReactApexChart(react-apexcharts: ^1.3.9) library to visualize some data. The chart contains a set of categories (countries) and their corresponding values. The issue I am facing is that when one category (e.g., "US") has a significantly higher value than others, the bars for other categories become invisible in the UI.
I would like to find a solution that allows all bars to be visible on the chart, regardless of their values. I understand that adjusting the tickAmount property can be a potential solution, but I'm unsure of the best way to approach this problem.
Here's a simplified version of my component code:
const BarChart = ({ labels, series, colors, width, name, tickAmount }) => {
return (
<ReactApexChart
options={{
xaxis: {
categories: labels,
tickAmount: tickAmount === true ? labels?.length / 2 : labels?.length
},
yaxis: {
labels: {
formatter: function (value) {
const intValue = parseInt(value, 10);
return intValue ? formatNumber(intValue) : 0;
}
}
},
colors: colors,
grid: {
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
}
},
tooltip: {
x: {
show: true
}
},
dataLabels: {
enabled: false
},
chart: {
type: "bar",
height: 200,
toolbar: {
show: false
}
},
legend: {
show: true,
showForSingleSeries: true
},
plotOptions: {
bar: {
barHeight: "50%",
borderRadius: 10,
columnWidth: width || "20px",
dataLabels: {
position: "bottom"
}
}
}
}}
series={[
{
name: name || "Page Views",
data: series
}
]}
type="bar"
width="100%"
height={250}
/>
);
};
const labels = [ "US", "CA", "NO", "GB", "AU", "DE", "MX", "IN", "JP", "IE", "IT", "SE", "FR", "NZ", "PH" ];
const series = [ 33190, 67, 36, 27, 23, 18, 15, 14, 14, 12, 12, 10, 9, 9, 7 ];
I have tried adjusting the tickAmount property in the x-axis options, but it doesn't seem to work as expected. I would greatly appreciate any insights or alternative approaches to ensure all bars are visible on the chart.
Thank you in advance for your help!