html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data

  var data = [

    {x: 4, value: 42},

    {x: 13, value: 59},

    {x: 25, value: 68},

    {x: 25, value: 63},

    {x: 44, value: 54},

    {x: 55, value: 58},

    {x: 56, value: 46},

    {x: 60, value: 54},

    {x: 72, value: 73, image: "https://pbs.twimg.com/profile_images/1389594666287476744/jbdbQ5Oh_400x400.jpg"}

  ];

​

  // create a chart

  var chart = anychart.quadrant(data);

  var series = chart.getSeries(0);

​

  // customize series appearance in the normal state

  series.normal()

    .size(15)

    .fill(function(){return {

      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",

      mode: "fit"

    }});

  // customize series appearance in the hovered state

  series.hovered()

    .size(20)

    .fill(function(){return {

      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",

      mode: "fit"

    }});

  // customize series appearance in the selected state

  series.selected()

    .size(25)

    .fill(function(){return {

      src: this.getData("image") ? this.getData("image") : "https://www.anychart.com/_design/img/static/AnyChart-circle.png",

      mode: "fit"

    }});

  // set the chart title

  chart.title("Quadrant Chart with Images as Markers");

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

});