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(4).fill("#c6e3f9").stroke("#3e5ca6");

​

      // set the titles of the axes

      chart

        .yAxis()

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #b3b3b3;">International sales ($ in millions)</span>'

        );

      chart

        .xAxis()

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #b3b3b3;">Domestic sales ($ in millions)</span>'

        );

​

      // set the chart title

      chart

        .title()

        .enabled(true)

        .useHtml(true)

        .text(

          '<span style = "color: #c6e3f9; font-size:18px;">Top 1000 Highest Grossing Hollywood Movies: Domestic vs. International Sales</span>'

        );

      // customize the scales

      chart.xScale().ticks({ interval: 200 });

      chart.yScale().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"

          );

        });

      // enable the grid lines

      chart.yGrid(true);

      chart.xGrid(true);

      // customize the grid stroke

      chart.yGrid().stroke({ color: "#071d58", dash: "4 5" });

      chart.xGrid().stroke({ color: "#071d58", dash: "4 5" });

​

      // set the background color

      chart.background().fill("#0d468f");

​

      // set the container id for the chart

      chart.container("container");

​

      // initiate drawing the chart

      chart.draw();

    }

  );

});