2

I'm using Amchart 4 In Angular 10 and want to reduce space between two columns.

I have tried so many ways but didn't solve this issue

Could you please someone help me with how to reduce those spaces between columns.

is there any elegant solution?

    let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
    chart.data = chartData;

    // Modify chart's colors
    chart.colors.list = [
        am4core.color("#1297e0"),
        am4core.color("#5ad146")
    ];

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        categoryAxis.dataFields.category = "country";
        categoryAxis.renderer.grid.template.location = 0;
        categoryAxis.renderer.minGridDistance = 100;
        categoryAxis.renderer.labels.template.disabled = true;

        chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "visits";
    series.dataFields.categoryX = "country";
    series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;
    series.columns.template.width = am4core.percent(20);

    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 1;
    columnTemplate.strokeOpacity = 0;

======== See attached screenshot for more understanding enter image description here


this.browserOnly(() => {
  am4core.useTheme(am4themes_material);
  am4core.useTheme(am4themes_animated);

  let chart = am4core.create("authorisedChartDiv", am4charts.XYChart);
  chart.data = chartData;

  // Modify chart's colors
  chart.colors.list = [
    am4core.color("#1297e0"),
    am4core.color("#5ad146")
  ];

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "country";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 100;
  categoryAxis.renderer.labels.template.disabled = true;

  chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = "visits";
  series.dataFields.categoryX = "country";
  series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;
  series.columns.template.width = am4core.percent(20);

  var columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 1;
  columnTemplate.strokeOpacity = 0;

  // Add distinctive colors for each column using adapter
  series.columns.template.adapter.add("fill", (fill, target) => {
    return chart.colors.getIndex(target.dataItem.index);
  });
#authorisedChartDiv {
  width: 100%;
  height: 250px;
}
<div id="authorisedChartDiv"></div>
Vrajesh Savaliya
  • 71
  • 1
  • 1
  • 8

1 Answers1

0

I guess this parameter are the key:

categoryAxis.renderer.cellStartLocation = 0.2
categoryAxis.renderer.cellEndLocation = 0.8

More info at: https://www.amcharts.com/docs/v4/tutorials/managing-width-and-spacing-of-column-series/

AlexSp3
  • 2,201
  • 2
  • 7
  • 24
  • The above solution is to increase the inner radius size. If I have to increase 100% then column width will be increased. – Vrajesh Savaliya Jul 16 '21 at 12:29
  • 1
    It seems that the best solution is to reduce the chart width, and then increase the cell width. I didn´t find the correct parameter. – AlexSp3 Jul 16 '21 at 12:40