html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.format.inputDateTimeFormat('yyyy-MM-dd');

​

anychart.onDocumentReady(function () {

​

  var json = [

    ['2018-01-04', 1000],

    ['2018-01-05', 20000],

    ['2018-01-06', 30000]

  ];

​

  var chart = anychart.area();

  chart.credits().enabled(false);

​

  var series = chart.area(json);

​

  var dateTimeScale = anychart.scales.dateTime();

  dateTimeScale.ticks().interval('day',1);

  chart.xScale(dateTimeScale);

​

  // set the gaps

  var xScale = chart.xScale();

  xScale.minimumGap(0.1);

  xScale.maximumGap(0.1);

​

  // This moves the plot itself, which is OK

  //  series.left(30);

  //  series.right(30);

​

  // This doesn't work because it moves both first and last label

  //chart.xAxis().labels().offsetX(-30);

  // This doesn't work because it moves all the labels, even the ones in the middle

  //chart.xAxis().labels().padding().left(50);

​

  chart.xAxis().labels().format(function () {

    return anychart.format.dateTime(this.value, anychart.format.outputDateFormat());

  });

​

  chart.yGrid().enabled(true);

  chart.yGrid().stroke({dash: "3 5", color: 'lightgray'});

  chart.xGrid().enabled(true);

  chart.xGrid().stroke({dash: "3 5", color: 'lightgray'});

​

​

  // draw

  chart.container("container");

  chart.draw();

});