Is it possible in AmCharts to make the bars in a s

Question

I am trying to create simple Serial Chart in AmCharts but can't make the bars take up the full width of the container. Is there a way to force this?

Interestingly, when I inspect the svg element, it does take up the full width of the parent but the bars inside don't stretch that full length.

Here's the graph configuration.

this.chart = this.AmCharts.makeChart(this.barChart.nativeElement, {
  type: 'serial',
  creditsPosition: 'bottom-right',
  rotate: true,
  resizeCategoryWidth: 10,
  dataProvider: chartData.publishers,
  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
            Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
  graphs: [
    {
      fillAlphas: 1,
      lineAlpha: 0,
      lineColor: '#2196f3',
      type: 'column',
      fillColors: '#E2E7EE',
      clustered: false,
      valueField: 'max',
      labelText: '[[value]]',
      labelFunction: function(val) {
        return val.dataContext.count;
      },
      labelPosition: 'right',
      columnWidth: 0.15,
      cornerRadiusTop: 3,
      showBalloon: false
    },
    {
      fillAlphas: 1,
      lineAlpha: 0,
      type: 'column',
      valueField: 'count',
      fillColors: '#2196f3',
      columnWidth: 0.15,
      cornerRadiusTop: 3,
      showBalloon: false
    }
  ],
  chartCursor: {
    categoryBalloonEnabled: false,
    cursorAlpha: 0,
    zoomable: false
  },
  categoryField: 'name',
  categoryAxis: {
    gridAlpha: 0,
    color: '#333',
    axisAlpha: 0,
    fontSize: 12,
    inside: true,
    gridPosition: 'start',
    tickPosition: 'start',
    tickLength: 0
  },
  valueAxes: [
    {
      axisAlpha: 0,
      gridAlpha: 0,
      showLastLabel: false
    }
  ]
});

Answer 1

AmCharts always adds some padding around the chart by default. If you want to expand the chart more toward the right, set marginRight to 0 or even a negative number to make the chart take up more space on the right side of the container. You can also set autoMargins to false and fine tune other other margins (top, left, bottom) to your liking.

var chartData = {
  publishers: [{
    name: "Pub-1",
    max: 1,
    count: .5
  },{
    name: "Pub-2",
    max: 1,
    count: .75
  },{
    name: "Pub-3",
    max: 1,
    count: .25
  },{
    name: "Pub-4",
    max: 1,
    count: 1
  }]
}
AmCharts.makeChart("chartdiv", {
  type: 'serial',
  creditsPosition: 'bottom-left',
  rotate: true,
  autoMargins: false,
  marginLeft: 20,
  marginBottom: 35,
  marginRight: -40,
  resizeCategoryWidth: 10,
  dataProvider: chartData.publishers,
  fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
            Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`,
  graphs: [
    {
      fillAlphas: 1,
      lineAlpha: 0,
      lineColor: '#2196f3',
      type: 'column',
      fillColors: '#E2E7EE',
      clustered: false,
      valueField: 'max',
      labelText: '[[value]]',
      labelFunction: function(val) {
        return val.dataContext.count;
      },
      labelPosition: 'right',
      columnWidth: 0.15,
      cornerRadiusTop: 3,
      showBalloon: false
    },
    {
      fillAlphas: 1,
      lineAlpha: 0,
      type: 'column',
      valueField: 'count',
      fillColors: '#2196f3',
      columnWidth: 0.15,
      cornerRadiusTop: 3,
      showBalloon: false
    }
  ],
  chartCursor: {
    categoryBalloonEnabled: false,
    cursorAlpha: 0,
    zoomable: false
  },
  categoryField: 'name',
  categoryAxis: {
    gridAlpha: 0,
    color: '#333',
    axisAlpha: 0,
    fontSize: 12,
    inside: true,
    gridPosition: 'start',
    tickPosition: 'start',
    tickLength: 0
  },
  valueAxes: [
    {
      axisAlpha: 0,
      gridAlpha: 0,
      showLastLabel: false
    }
  ]
});

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>