html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN

  // https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js

​

  // Load JSON data and create a chart by JSON data

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/general-features/min-and-max-labels-on-range-column-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/general-features/min-and-max-labels-on-range-column-chart/data.json',

    function (data) {

      // create column chart first

      var chart = anychart.column();

      // set chart title text settings

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .text('Average max and min Temperatures in (°F)');

      // enable the grid

      chart.yGrid(true).yMinorGrid(true);

​

      // create range-data with passed data

      var temperatureData = anychart.data.set(data);

​

      // map data for the series, take x from the month column

      var mapping = temperatureData.mapAs({

        x: 'month'

      });

​

      // create series

      var series = chart.rangeColumn(mapping);

      // set name

      series.name('Temperatures');

      // set max labels settings

      series

        .maxLabels()

        .enabled(true)

        .position('high')

        .fontWeight('bold')

        .fontSize(14)

        .fontColor('#DB5854');

      // set min labels settings

      series

        .minLabels()

        .enabled(true)

        .position('high')

        .fontWeight('bold')

        .fontSize(14)

        .fontColor('#304ffe');

      // format labels

      series.labels().enabled(true).format('{%low} - {%high}');

      // format tooltip

      series.tooltip().titleFormat('Temperature in {%X}');

​

      // set scrolls

      chart.xScroller(true);

      // set starting zoom

      chart.xZoom().setToPointsCount(12);

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});