html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile('https://static.anychart.com/cdn/ts/bubbleData.json', function (data) {

​

    // create quadrant chart

    var chart = anychart.quadrant();

    // set chart padding

    chart.padding([10, 10, 25, 10]);

​

    // set scales settings

    chart.yScale()

      .minimum(0)

      .maximum(10);

    chart.xScale()

      .minimum(0)

      .maximum(10);

​

    // map data for the series

    var dataSet = anychart.data.set(data).mapAs({'x': 'x', 'value': 'value'});

​

    // create series with data

    var series = chart.bubble(dataSet);

    series.labels()

      .enabled(true)

      .fontFamily('Arial')

      .position('right')

      .anchor('right-center')

      .fontColor('#455a64')

      .offsetX(5)

      .offsetY(0)

      .format(function () {

      return this.getData('name')

    });

​

    // set chart container id

    chart.container('container');

    // initiate chart drawing

    chart.draw();

  });

});