0
314
ViewsHow to make fixed width for all bars in apexcharts bar column width
Since we are using dynamic data, the data length should also be dynamic. For example, if data length is 24 column width should be 35px. if data is 2 length that time also column width should be 35px.
apexchart using columnWidth in percentage so i am not able to specify exact width for all bars in all condition if there is 1 Bar, 5 Bar, 30 Bars. it is working as responsive behaviour but i want to make it fixed width for all Bars
I want columnWidth to fixed with 1st image size when there is 1 data also. see in 2nd graph columnWidth is showing bigger than previous. so i want fixed for all bars in all case.
Using: import ApexCharts from "react-apexcharts"; "react-apexcharts": "^1.3.6",
1 answers
Answer question0
In ApexCharts, there is no option to give columnWidth in pixels. You can maybe try to set percentage width based on the number of categories present. It won't be 100% accurate but might just solve the purpose.
With the chart width (w), a series of data (n), and the desired column width in px (x), I can get the width in percentage with this function:
const getPercentWidth = (w, n, x) => {
const percentWidth = Math.round((x / (w / n)) * 100)
return `${percentWidth}%`
}
You can check this issue on their github repo for more options in future.