Search code examples
javascriptcssreactjscanvasamcharts

amChart clustered-column-chart labels are not related with columns

I am using amchart5 with React and based on this demo decided to create clustered vertical chart.
if I give "500px" as width it would be like width:"500px"
if I give "400px" or less it would be like width:"400px" or less
as you see place of labels like 2021 or 2021 changed ...
so how can I fix this? I want to give differents width and it will work without this problem

Solution

  • Default gradiant size of this chart demo is big that's why labels would be hidden. Added minGridDistance to my xAxis like this:

    const xAxis = chart.xAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "x",
    renderer: am5xy.AxisRendererX.new(root, {
      cellStartLocation: 0.1,
      cellEndLocation: 0.9,
      minGridDistance: 20,
      maxWidth: 150,
    }),
    tooltip: am5.Tooltip.new(root, {}),
  })
);

    and it solved!