html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile(

    "https://gist.githubusercontent.com/shacheeswadia/dceaadd5fb4ea27cd9975ff39e9f98f4/raw/6baac571527d9b13e397cfb3d982d7942246dcc0/scatterPlotData.json",

    function (data) {

      // create a scatter chart

      let chart = anychart.scatter();

​

      // create and configure markers

      let marker = chart.marker(data);

      marker.type("circle").size(2);

​

      // set the titles of the x and y axis

      chart.yAxis().title("International sales ($ in millions)");

      chart.xAxis().title("Domestic sales ($ in millions)");

​

      // set the chart title

      chart.title(

        "Top 1000 Highest Grossing Hollywood Movies: Domestic vs. International Sales"

      );

      // customize the scales

      chart.xScale().minimum(0).maximum(2200).ticks({ interval: 200 });

      chart.yScale().minimum(0).maximum(2200).ticks({ interval: 200 });

      // configure the tooltip

      marker.tooltip().titleFormat(function () {

        return this.getData("title");

      });

      marker

        .tooltip()

        .format(function () {

          return (

            "\nTOTAL SALES: " +

            "$" +

            this.getData("totalSales") +

            "M" +

            "\nDomestic sales: " +

            "$" +

            this.x +

            "M" +

            "\nInternational sales: " +

            "$" +

            this.value +

            "M"

          );

        });

​

      // set the container id for the chart

      chart.container("container");

​

      // initiate drawing the chart

      chart.draw();

    }

  );

});