How to show month and year both together on amCharts?

Question

I am trying to show month and year stacked together using amCharts library. I am not getting the desired result. I am wondering if there is any way to concatenate strings using amCharts to show month and year stacked together or something like that. Also, if anyone can help with positioning title and labels of chart will be a great help. I have title.text and title title.text.align but it is not getting aligned.

Code is here:

private chart: am4charts.XYChart;

constructor(private zone: NgZone) {}

ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
        let chart = am4core.create("chartdiv", am4charts.XYChart);

        chart.data = [{
            "date": "2018-10",
            "institutional": 5001.9,
            "proRata": 2000,
            "sales": 1999,
        }, {
            "date": "2018-11",
            "institutional": 3001.9,
            "proRata": 500,
            "sales": 2500,
        } ... ];

        console.log(chart.data);

        chart.paddingRight = 0;
        chart.numberFormatter.numberFormat = "'$'#.#'B'";
        chart.dateFormatter.inputDateFormat = "YYYY-MM-DD";

        // Create axes
        // var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
        var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
        dateAxis.dateFormatter.dateFormat = "MM-yyyy";
        dateAxis.dataFields.data = "date";
        // dateAxis.dataFields.date = "{date}{yyyy}";
        dateAxis.title.text = "Source: LCD, an offering of S&P Global Market Intelligence";
        dateAxis.align = "left";
        dateAxis.renderer.grid.template.location = 0;
        dateAxis.renderer.minGridDistance = 10;
        dateAxis.renderer.grid.template.disabled = true;

        var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

        var label =
            dateAxis.renderer.labels.template;
        label.wrap = true;
        label.maxWidth = 55;


        var series3 = chart.series.push(new am4charts.ColumnSeries());
        series3.dataFields.valueY = "sales";
        series3.dataFields.dateX = "date";
        series3.name = "Sales";
        series3.tooltipText = "{name}: [bold]{valueY}[/]";
        series3.fill = am4core.color("#5783B7");
        // series3.stacked = true;

        var series2 = chart.series.push(new am4charts.ColumnSeries());
        series2.dataFields.valueY = "proRata";
        series2.dataFields.dateX = "date";
        series2.name = "Pro Rata";
        series2.tooltipText = "{name}: [bold]{valueY}[/]";
        // Do not try to stack on top of previous series
        series2.stacked = true;
        series2.fill = am4core.color("#EF5628");
        series2.align("left");

        // Add cursor
        chart.cursor = new am4charts.XYCursor();

        // Add legend
        chart.legend = new am4charts.Legend();

        // Add Colors
        chart.colors.list = [
            am4core.color("#845EC2"),
            am4core.color("#D65DB1"),
            am4core.color("#FF6F91"),
            am4core.color("#FF9671"),
            am4core.color("#FFC75F"),
            am4core.color("#F9F871")
        ];

        this.chart = chart;

    });
}

Answer 1

Try this:

    dateAxis.renderer.labels.template.textAlign = "middle";
    dateAxis.dateFormats.setKey("month", "MMM\nyyyy");