Search code examples
amcharts

Possible custom axis scale?


Is it possible to set my own scale for numerical results?

I need to set the scales with these values 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000


Solution

  • AmCharts v4 doesn't provide a way to directly influence the scale outside of setting minGridDistance on the axis. A workaround for this is to disable the axis' own generated labels and create your own using axis ranges. You'll also want to set your own min/max values on the axis.

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.labels.template.disabled = true;
    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.min = <your min value>;
    
    range = valueAxis.axisRanges.create();
    range.value = <axis value>;
    range.endValue = range.value;
    range.label.text = range.value; 
    // ... repeat for each axis increment
    
    valueAxis.max = <your max value>;
    

    Here's a basic demo:

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    
    // Add data
    chart.data = [{
      "date": new Date(2018, 0, 1),
      "value": 450,
      "value2": 362,
      "value3": 699
    }, {
      "date": new Date(2018, 0, 2),
      "value": 269,
      "value2": 450,
      "value3": 841
    }, {
      "date": new Date(2018, 0, 3),
      "value": 700,
      "value2": 358,
      "value3": 699
    }, {
      "date": new Date(2018, 0, 4),
      "value": 490,
      "value2": 367,
      "value3": 500
    }, {
      "date": new Date(2018, 0, 5),
      "value": 500,
      "value2": 485,
      "value3": 369
    }, {
      "date": new Date(2018, 0, 6),
      "value": 550,
      "value2": 354,
      "value3": 250
    }, {
      "date": new Date(2018, 0, 7),
      "value": 420,
      "value2": 350,
      "value3": 600
    }];
    
    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
    categoryAxis.renderer.grid.template.location = 0;
    
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.labels.template.disabled = true;
    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.min = 0;
    
    var rangeValue = 50;
    
    for (var i = 0; i < 8; ++i) {
      range = valueAxis.axisRanges.create();
      range.value = (rangeValue += ((i + 2) * 25));
      range.endValue = range.value;
      range.label.text = range.value; 
    }
    
    valueAxis.max = rangeValue;
    
    // Create series
    function createSeries(field, name) {
      var series = chart.series.push(new am4charts.LineSeries());
      series.dataFields.valueY = field;
      series.dataFields.dateX = "date";
      series.name = name;
      series.tooltipText = "{dateX}: [b]{valueY}[/]";
      series.strokeWidth = 2;
      
      var bullet = series.bullets.push(new am4charts.CircleBullet());
      bullet.circle.stroke = am4core.color("#fff");
      bullet.circle.strokeWidth = 2;
    }
    
    createSeries("value", "Series #1");
    createSeries("value2", "Series #2");
    createSeries("value3", "Series #3");
    
    chart.legend = new am4charts.Legend();
    chart.cursor = new am4charts.XYCursor();
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <div id="chartdiv" style="width:100%; height: 500px;"></div>