html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

// create a stage

var stage = acgraph.create("container");

​

// create style objects for the elements

const pointTextStyle = {fontSize: "25px", fontWeight: 600, color: "darkred"};

const labelsTextStyle = {fontSize: "10px", fontWeight: 400, color: "gray"};

​

// create text for the point elements (figures)

function createPoints(point1, point2){

  // set the points' text

  stage.text(stage.width()/10*4, stage.height()/2-10, point1, pointTextStyle);

  stage.text(stage.width()/10*5+10, stage.height()/2-10, "–", pointTextStyle);

  stage.text(stage.width()/10*6-20, stage.height()/2-10, point2, pointTextStyle)

};

​

// create text for the label elements

function createLabels(label1, label2){

  //set the labels' text

  stage.text(stage.width()/10*4-6, stage.height()/2+20, label1, labelsTextStyle);

  stage.text(stage.width()/10*6-25 ,stage.height()/2+20, label2, labelsTextStyle)

};

​

// create the elements

createPoints("8.24", "45%");

createLabels("1ST QUARTILE", "3RD QUARTILE");