html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

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

  // https://cdn.anychart.com/samples/error-charts/marker-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/error-charts/marker-chart/data.json',

    function (data) {

      // create scatter chart

      var chart = anychart.marker();

​

      // set chart padding

      chart.padding([10, 20, 0, 10]);

​

      // set chart title text settings

      chart.title(

        'Prime Costs and Prices for ACME Fashion\nCollection "Spring-Summer, 2016"'

      );

​

      // create marker series

      var series = chart.marker(data);

​

      // sets markers settings

      series.stroke('1 #1976d2');

      series.hovered().stroke('1 #1976d2');

​

      // set tooltip formatter

      series

        .tooltip()

        .useHtml(true)

        .position('right')

        .anchor('left-bottom')

        .titleFormat(function () {

          return this.getData('name');

        })

        .format(function () {

          return (

            '<span style="font-size: 12px; color: #E1E1E1">Prime cost: </span>$' +

            this.getData('x') +

            '<br/>' +

            '<span style="font-size: 12px; color: #E1E1E1">Price: </span>$' +

            this.getData('value')

          );

        });

​

      // set titles for axises

      chart.xAxis().title('Prime costs per item, $');

      chart.yAxis().title('Price per item, $');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});