如何为顶点图表栏列宽中的所有栏设置固定宽度

Question

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

1. 
2. 

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",

Answer 1

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.