How to set a maximum width to a specific bar in a column/bar series in ag-charts?

Question

I am creating a dynamic chart using ag-charts wherein sometimes only a single label or value is there in the x-axis. In that case the bar in the chart becomes really thick and huge and doesn't appear very user friendly (as shown in the figure).

I would like to fix a maximum width to the bars in such a way that irrespective of the number of bars in the chart, the width should not go beyond a particular value. I have tried many approaches, like adding maxWidth, barPercentage etc, but nothing seems to be working.

const options = {
  container: document.getElementById('myChart'),
  title: {
    text: "Apple's revenue by product category",
  },
  subtitle: {
    text: 'in billion U.S. dollars',
  },
  data: getData(),
  series: [
    {
      type: 'column',
      xKey: 'quarter',
      yKey: 'iphone',
    },
  ],
};

I tried using maxWidth, barPercentage but nothing seems to be working. I want to decrease the width of the bar.

Answer 1

You need to play with these values

series: [
  {
    type: 'column',
    xKey: 'quarter',
    yKey: 'iphone',
    // PLAY WITH THESE VALUES
    strokeWidth: 35,
    lineDash: [0,2],
  },
]

strokeWidth The width in pixels of the stroke for the columns.

lineDash Defines how the column strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.

Plunker:

https://plnkr.co/plunk/4TJgEDmy8V2wRE0h