html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  // chart type

  var chart = anychart.polar();

  chart.title().text("Polar Chart");

  chart.line([

    {x: 0, value: 0},

    {x: 10, value: 1},

    {x: 20, value: 2},

    {x: 30, value: 3},

    {x: 40, value: 4},

    {x: 50, value: 5},

    {x: 60, value: 6},

    {x: 70, value: 7},

    {x: 80, value: 8},

    {x: 90, value: 9},

    {x: 100, value: 10}

  ]).tooltip().enabled(false);

  chart.xScale().maximum(100).ticks().interval(10);

  chart.yScale().ticks().interval(2);

  chart.xAxis().labels().fontWeight(900);

  chart.container("container").draw();

  // create JSON config

  chartJson = chart.toJson();

  var body = document.getElementsByTagName("body")[0];

  var button = document.createElement("div");

  button.style.padding = "2px";

  button.style.textAlign = "center";

  button.style.position = "fixed";

  button.style.top = "2px";

  button.style.right = "2px";

  button.style.backgroundColor = "#444444";

  button.style.border = "1px solid #444444";

  button.style.borderRadius = "5px";

  button.style.color = "white";

  button.style.fontFamily = "Tahoma";

  button.style.cursor = "pointer";

  button.style.MozUserSelect= "none";

  button.style.KhtmlUserSelect= "none";

  button.style.WebkitUserSelect= "none";

  button.style.userSelect= "none";

  button.innerHTML = "Show<br/>JSON config";

  button.onclick = showJson;

  body.appendChild(button);

  function showJson(){

    var display = document.createElement("div");

    display.style.position = "absolute";

    display.style.width = "60%";

    display.style.height = "40%";

    display.style.resize = "both";

    display.style.padding = "3px";

    display.style.top = 0;

    display.style.left = 0;

    display.style.right = 0;

    display.style.backgroundColor = "rgba(255, 255, 255, 0.9)";

    display.style.border = "1px solid #999999";

    display.style.zIndex = 90;

    display.style.whiteSpace = "pre";

    display.style.overflow = "scroll";

    display.style.margin = "auto";

    // parse JSON

    display.innerHTML = highLighter(JSON.stringify(chartJson, undefined, 2));

    body.appendChild(display);

    button.innerHTML = "Hide<br/>JSON config";

    button.onclick = function(){

      body.removeChild(display);

      button.onclick = showJson;

      button.innerHTML = "Show<br/>JSON config";

    };

  }

  // highlight JSON

  function highLighter(strJson){

    json = strJson.replace(/&/g, "&amp;").replace(/</g,"&lt;").replace(/>/g, "&gt;");

    return strJson.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

      var cls = "number";

      if (/^"/.test(match)) {

if (/:$/.test(match)) {

  cls = "key";

  return "<span style=\"color: #718C00;\">" + match.substr(0, (match.length - 1)) + "<a style=\"color:black;\">:</a></span>";

}

      }

      return "<span style='color: darkorange;'>" + match + "</span>";

    });

  }

});