Search code examples
javascriptamcharts

amcharts 4 - previous version 3 user with some troubles

I have been using amcharts version 3 for quite a while now and would like to move onto the new version 4. I am having quite a bit of trouble replicating what I was doing in the older version. I have gone through the docs and examples, tried different things, but still can't get this to behave how I wish.

  • first 'day/value' is cutoff by the axes

  • the days on the x-axis aren't centered with the days displayed by the cursor which looks very weird

  • there should only be 7 data points shown (7 days), but there is always an extra day shown on the end giving an empty space on the right side of the chart

  • I can't get the value tooltip centered over the data point

  • lastly, I can't get the date format to change at all and have tried about every example shown in the doc for this [FIXED]

I am wondering if this has something to do with using timestamps in my data. The previous version had no problem with this.

// Create chart instance
var chart = am4core.create("chart_alerts", am4charts.XYChart);

chart.data = randomData();
chart.fontSize = 12;
chart.paddingRight = 0;
chart.paddingLeft = 0;
chart.paddingTop = 20;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.grid.template.location = 0;
dateAxis.tooltip.background.pointerLength = 0;
dateAxis.tooltip.fontSize = 12;

//fixes the date display
dateAxis.dateFormats.setKey("day", "EEE, MMM dd");
dateAxis.periodChangeDateFormats.setKey("day", "EEE, MMM dd");

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.min = 0;

var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "timestamp";
series.dataFields.valueY = "count";
series.stroke = am4core.color("#eb4741");
series.strokeWidth = 2;
series.tensionX = 0.8;
series.fill = am4core.color("#eb4741");
series.fillOpacity = 0.1;
series.tooltipText = "Total : {valueY}";
series.tooltip.background.pointerLength = 0;
series.tooltip.fontSize = 12;
series.tooltip.background.strokeOpacity = 0;
series.tooltip.background.fillOpacity = 1;

var dropShadow = new am4core.DropShadowFilter();
dropShadow.dy = 0;
dropShadow.dx = 0;
dropShadow.opacity = 0;
series.tooltip.filters.push(dropShadow);

var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.radius = 4;
bullet.circle.fill = am4core.color("#fff");
bullet.circle.strokeWidth = 2;

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.opacity = 0;
chart.cursor.lineY.opacity = 0;

//random data generator up to 300
function randomData() {

    var curr_date = $.now();

    //counter
    var count = 7;

    //rand value
    function randValue() {
        return Math.floor(Math.random() * 300);
    }

    series = [  
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()},
        {'timestamp': curr_date - (--count * 86400000), 'count': randValue()}
    ];

    return series;
}

Fiddle is at JSFiddle

EDIT : I managed to fix the date formatting issue as I came across someone else with the same problem. Fiddle has been updated, but still having issues with the other stuff.

Solution
    • first 'day/value' is cutoff by the axes
    • the days on the x-axis aren't centered with the days displayed by the cursor which looks very weird

    I think that's the default behavior when you run out of space on the page. The labels as well as the guide lines are not aligned with the data points.

    For example: https://www.amcharts.com/demos/date-based-data/

    enter image description here

    And there is a reason for that, which is explained in the documentation: https://www.amcharts.com/docs/v4/concepts/axes/#Labels_on_Date_axis

    To "force" the labels to align with the data points, the only way I found out is to set minGridPosition to a small number. But that has drawback of displaying every label even when there is not enough space, making all labels clamp together:

    ...,
xAxes: [{
    type: "DateAxis",
    renderer: {
        grid: {
            disabled: true
        },
        minGridDistance: 1
    },
    tooltip: {
        fontSize: 12,
        background: {
            pointerLength: 0
        }
   }
}],
...

    enter image description here

    demo: http://jsfiddle.net/davidliang2008/0shze83d/

    • I can't get the value tooltip centered over the data point

    You have to change pointerOrientation to "vertical", as opposed to the side of it. Additionally, you might want to align the text as well:

    ...,
series: [{
    type: "LineSeries",
    ...,
    tooltip: {
        pointerOrientation: "vertical",
        textAlign: "middle",
        textVAlign: "middle",
        ...
    },
    ...
}],
...

    enter image description here

    demo: http://jsfiddle.net/davidliang2008/hy5xeu1w/