Search code examples
javascriptangularamchartsamcharts4

How to remove gap between chart and X-axis value in AmChart?

I have a Multi Value Am-chart graph generated by external data (i.e., after Date selection chart will load based on data provided.) But after loading, data my chart shows like below image enter image description here

As highlighted in yellow color in image. How to remove the space between "Date and chart" . Also Is there any way to display a line for the x-axis in this chart.

Below is my code.

createAxisAndSeries( field, name ) {
    // Add cursor
    this._chart.cursor = new am4charts.XYCursor();
    this._chart.colors.step = 6;

    // Create axes
    let dateAxis = this._chart.xAxes.push( new am4charts.DateAxis() );
    dateAxis.dataFields.category = "date";
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 40;

    dateAxis.dateFormatter.inputDateFormat = "YYYY-MM-DD, HH:mm:ss";
    dateAxis.periodChangeDateFormats.setKey("day", "MMM dt");

    let valueAxis = this._chart.yAxes.push( new am4charts.ValueAxis() );

    let series = this._chart.series.push( new am4charts.LineSeries() );
    series.dataFields.valueY = field;
    series.dataFields.dateX = "date";
    series.tensionX = 0.8;
    series.strokeWidth = 2;
    series.strokeOpacity = 5;
    series.yAxis = valueAxis;
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";

    let interfaceColors = new am4core.InterfaceColorSet();
    let bullet = series.bullets.push( new am4charts.CircleBullet() );
    bullet.circle.stroke = interfaceColors.getFor( "background" );
    bullet.circle.strokeWidth = 2;

    valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 2;
    valueAxis.renderer.line.stroke = series.stroke;
    valueAxis.renderer.labels.template.fill = series.stroke;
    valueAxis.renderer.grid.template.disabled = true;
}

I know Am-chart have many properties to beautify things but I'm unable to find the exact property according to my requirement.

Any help from experts here.

Thanks in advance.

Solution

  • Finally I got the answer as I mention there is some AmChart property which I was unable to find that. It is nothing but "Positioning Axis Elements"

    Just add these lines in dataAxis

    dateAxis.renderer.minLabelPosition = 0.05;
dateAxis.renderer.maxLabelPosition = 0.95;

    It works. :)