html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // data set

    var data = [

      {x: "Odyssean", value: 1.5, fill: "#E9C46A"},

    ];

    var data_outer = [

      {x: "Apollonian", value: 40, fill: "#FF006E"},

      {x: "Odyssean", value: 50, fill: "#E9C46A"},

      {x: "Dionysian", value: 10, fill: "#2A9D8F"},

    ];

​

    // create and configure a pie chart

    var chart_outer = anychart.pie(data_outer);

    chart_outer.legend(false);

    chart_outer.innerRadius("65%");

    chart_outer.padding(0);

    chart_outer.margin(0);

    //chart_outer.labels().position("outside");

    //chart_outer.connectorStroke({color: "#595959", thickness: 2, dash:"2 2"});

    chart_outer.labels().format("{%x} {%yPercentOfTotal}%");

​

    // create a bar chart

    var chart_inner = anychart.pie(data);

    //chart_inner.padding(-10);

    //chart_inner.margin(-20);

    chart_inner.legend(false);

    chart_inner.radius("100%");

    chart_inner.labels().format("Biologically\n{%x}\nERS:{%value}");

    chart_inner.labels().fontSize(20);

    chart_inner.labels().hAlign("center");

    //chart_inner.labels().fontColor("green");

    //chart_inner.labels().fontWeight(900);

    //chart_inner.innerRadius("30%");

    // background settings

    //var xLabelsBackground = chart_inner.labels().background();

    //xLabelsBackground.enabled(true);

    //xLabelsBackground.fill("black");

    //xLabelsBackground.stroke("#cecece");

    //xLabelsBackground.cornerType("round");

    //xLabelsBackground.corners(5);

    // set bar chart as the center content of a pie chart

    chart_outer.center().content(chart_inner);

​

    chart_outer.title("AOD/HIP COmparison");

    chart_outer.container("container");

    chart_outer.draw();

});