Setting Maximum And Minimum Xscale Values In Anychart Graph Results In An Exception

I am creating a line chart using AnyChart I need set the minimum and maximum xScale values for this graph. I have tried the following: chart.xScale().minimum('2 April 2019'); char

Solution 1:

The default xScale for the line chart is an ordinal scale. This scale type doesn't support min/max values as it represents logic categories. Your data is dateTime related, for this case the dataTime scale is more suitable. You can apply dateTime scale to your chart and adjust min/max. Below is your modified JS code:

anychart.onDocumentReady(function() {

  anychart.format.inputDateTimeFormat('dd MMM yyyy');

  // create line chartvar dataSet = anychart.data.set([
    [
      "24 Apr 2019",
      100.0
    ],
    [
      "24 Apr 2019", -100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "29 Apr 2019",
      100.0
    ],
    [
      "2 May 2019",
      100.0
    ],
    [
      "2 May 2019", -100.0
    ],
    [
      "3 May 2019",
      100.0
    ],
    [
      "6 May 2019", -100.0
    ],
  ]);

  chart = anychart.line();
  chart.animation(true);
  chart.crosshair()
    .enabled(true)
    .yLabel(false)
    .yStroke(null);
  chart.tooltip().positionMode('point');
  chart.legend()
    .enabled(true)
    .fontSize(13)
    .padding([0, 0, 10, 0]);

  var seriesData_1 = dataSet.mapAs({
    'x': 0,
    'value': 1
  });

  var series_1 = chart.line(seriesData_1);

  series_1.name('Apple');
  series_1.color("#335FAB");
  series_1.hover().markers()
    .enabled(true)
    .type('circle')
    .size(4);
  series_1.tooltip()
    .position('right')
    .anchor('left-center')
    .offsetX(5)
    .offsetY(5);

  //adjust xScalevar scale = anychart.scales.dateTime();
  scale.minimum(anychart.format.parseDateTime('2 April 2019', 'dd MMM yyyy'));
  scale.maximum(anychart.format.parseDateTime('10 May 2019', 'dd MMM yyyy'));
  chart.xScale(scale);

  chart.container('container');
  chart.draw();
});

But if you really need the ordinal scale type, you can use a trick. Just add the following line to your code:

chart.xScale().values(['2 April 2019', '24 Apr 2019', '29 Apr 2019', '2 May 2019', '3 May 2019', '6 May 2019', '10 May 2019']);

You can learn more about scale types in the article.