html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var chart = anychart.pyramid([

    {name: "Fantasy", value: 637166},

    {name: "Science Fiction", value: 721630},

    {name: "Detective", value: 148662},

    {name: "Classics", value: 78662},

    {name: "Textbooks", value: 90000}

  ]);

​

  // configure the visual settings of the chart

  chart.normal().fill("#004d39", 0.3);

  chart.hovered().fill("#004d39", 0.1);

  chart.selected().fill("#004d39", 0.5);

  chart.hovered().hatchFill("forward-diagonal", "#004d39", 1, 15);

  chart.selected().hatchFill("forward-diagonal", "#004d39", 1, 15);

  chart.normal().stroke("white");

  chart.hovered().stroke("white", 2);

  chart.selected().stroke("white", 2);

​

  // draw chart

  chart.container("container");

  chart.draw();

});