Additional or standalone xAxis in anycharts

Question

I need to display a second xAxis on my chart but with different labels. I managed to display a second xAxis by using chart.xAxis(1) but did not managed to change the labels of the second axis. The second xAxis has the labels of the first. A standalone xAxis may be a solution but there is no documentation on that now (https://docs.anychart.com/Dashboards/Standalones#axes).

How do I change the labels of the second xAxis?

Edit: I have an array (["2019-02-18", "2019-02-25"], for example) that I want to set as labels of xAxis.

Akber Iqbal · Accepted Answer · 2019-03-26T04:58:15.723

The demo below can help... more information here

UPDATE: set the extra x-axis and changed the labels afterwards as per questioner's comment.

anychart.onDocumentReady(function() {

  // JSON data
  var json = {
    // chart settings
    "chart": {

      // chart type
      "type": "column",

      // set chart title
      "title": "JSON Data Set. Multiple Series",

      // series settings
      "series": [{
        "seriesType": "line",

        // first series data
        "data": [
          {            "x": "P1",            "value": "128.14"          },
          {            "x": "P2",            "value": "112.61"          },
          {            "x": "P3",            "value": "163.21"          },
          {            "x": "P4",            "value": "229.98"          },
          {            "x": "P5",            "value": "90.54"          }
        ]
      }, {
        "seriesType": "line",

        // second series data
        "data": [
          {            "x": "P1",            "value": "290.54"          },
          {            "x": "P2",            "value": "604.19"          },
          {            "x": "P3",            "value": "650.67"          },
          {            "x": "P4",            "value": "620.43"          },
          {            "x": "P5",            "value": "600.34"          }
        ]
      }],
      // chart container
      "container": "container"
    }
  };

  // get JSON data
  var chart = anychart.fromJson(json);

  // draw chart
  chart.draw();


  chart.xAxis().title("Basic X Axis");

  chart.xAxis().labels().format(val => {
    switch (val.value) {
      case 'P1':
        return '2000 Jan';
      case 'P2':
        return '2000 Feb';
      case 'P3':
        return '2000 Mar';
      case 'P4':
        return '2000 Apr';
      case 'P5':
        return '2000 May';
      default:
        return val.value;
    }
  })

  chart.xAxis(1).title("Extra X Axis");
  chart.xAxis(1).labels().format(val => {
    switch (val.value) {
      case 'P1':
        return '2001 Jan';
      case 'P2':
        return '2001 Feb';
      case 'P3':
        return '2001 Mar';
      case 'P4':
        return '2001 Apr';
      case 'P5':
        return '2001 May';
      default:
        return val.value;
    }
  })


});

html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>

<link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.css" rel="stylesheet" />
<link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" rel="stylesheet" />

<div id="container"></div>

Hello, this is not exactly my problem. Perhaps this can clarify it : https://playground.anychart.com/xgZlVbuC What I would like is to set the labels of the second axis using the labels of the second array and not having the labels of the first series on it — Quentin, Mar 25 '19 at 12:43
Glad that it worked for you, would appreciate a vote up also :) — Akber Iqbal, Apr 01 '19 at 10:54

Additional or standalone xAxis in anycharts

1 Answers1