CODEWITHSUNDEEP
javascripttypescriptangular10amcharts4column-chart
Vrajesh Savaliya
Vrajesh Savaliya

Reputation: 71

How to reduce space between two columns in column chart using amcharts 4

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>

Upvotes: 2

Views: 862

Answers (1)

AlexSp3
AlexSp3

Reputation: 2293

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/

Upvotes: 1

Related Questions