html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create a stage

  var stage = anychart.graphics.create("container");

​

  // Apply the theme (if applicable)

  anychart.theme(anychart.themes.marketForecast);

​

  stage

    .credits()

    .enabled(true)

    .url('https://www.marketforecast.com')

    .logoSrc('https://www.marketforecast.com/favicon.ico')

    .text('Copyright MarketForecast {CY}');

​

​

  // Data for the charts

  var dataSet = anychart.data.set([

    ['North America', 9097, 15253, 80008],

    ['Europe', 14694, 25540, 180600],

    ['APAC', 5917, 12657, 64745],

    ['Middle-East & Africa', 14019, 23990, 115827],

    ['Latin America', 1073, 2256, 13115]

  ]);

​

  var SeriesFY = dataSet.mapAs({ x: 0, value: 1 });

  var SeriesLY = dataSet.mapAs({ x: 0, value: 2 });

​

  // Create and configure the standalone title

  var stagetitle = anychart.standalones.title();

  stagetitle

    .enabled(true)

    .useHtml(true)

    .padding([10, 0, 10, 0]) // Add padding to create space around the title

    .text(

      '<span style="font-size: 16px; font-weight: bold;">{{TOPIC}} Market Forecast to {LY} by {SEGMENT}</span>'

    );

​

  // Set the container for the title and draw it

  stagetitle.container(stage);

  stagetitle.draw();

​

  // create and configure the first pie chart (smaller)

  var chartFY = anychart.pie(SeriesFY);

​

  // Set chart margin settings

  chartFY.padding(5, 5, 5, 5);

​

  // set the chart title

  var title = chartFY.title();

  // enable title

  title.enabled(true);

  title.text("{FY market size} US$ XXX million / billion");

  title.orientation("bottom");

  title.align("center");

  title.fontSize(12);

  // Configure labels

  chartFY.labels().position('outside');

​

  // set chart legend settings

  chartFY.legend().enabled(false);

​

  // Adjust the bounds to make chartFY smaller

  chartFY.bounds(0, "20%", "40%", "60%");

  chartFY.background().stroke(null);

  chartFY.innerRadius("30%");

​

  // create and configure a label

  var labelFY = anychart.standalones.label();

  labelFY.text("{FY}");

  labelFY.width("100%");

  labelFY.height("100%");

  labelFY.fontColor("#003A70");

  labelFY.fontWeight("bold");

  labelFY.hAlign("center");

  labelFY.vAlign("middle");

  // set the label as the center content

  chartFY.center().content(labelFY);

​

  // Configure tooltips

  chartFY.tooltip().title().fontColor("#FFFFFF"); // Set tooltip text color

  chartFY.tooltip().title().fontSize(14); // Set tooltip font size

  chartFY.tooltip().fontColor("#FFFFFF"); // Set tooltip text color

  chartFY.tooltip().fontSize(12); // Set tooltip font size

  chartFY.tooltip().padding(10); // Set tooltip padding

  chartFY.tooltip().format("{%Value}"); // Include the name, value, and percentage in the tooltip

​

    // Customize the tooltip title and content

  chartFY.tooltip()

    .titleFormat(function () {

      return '' + this.getData('x');

    })

    .format(function () {

      return '{FY} : ' + anychart.format.number(this.getData('value'), {

        groupsSeparator: ',',

        decimalSeparator: '.'

      }) + ' US$ Million';

    });

  // Set a white border around each slice

  chartFY.stroke("1 #FFFFFF");  

  // set the chart container

  chartFY.container(stage);

  // initiate drawing the chart

  chartFY.draw();

​

  // create and configure the second pie chart (larger)

  var chartLY = anychart.pie(SeriesLY);

​

  // Set chart margin settings

  chartLY.padding(5, 5, 5, 5);

​

  // set the chart title

  var title = chartLY.title();

  title.enabled(true);

  title.text("{LY market size} US$ XXX million / billion");

  title.orientation("bottom");

  title.align("center");

  title.fontSize(12);

  // Configure labels

  chartLY.labels().position('outside');

  // set chart legend settings

  chartLY.legend().enabled(false);

​

  // Adjust the bounds to make chartLY larger

  chartLY.bounds("40%", "10%", "60%", "80%");

  chartLY.background().stroke(null);

  chartLY.innerRadius("30%");

​

  // create and configure a label

  var labelLY = anychart.standalones.label();

  labelLY.text("{LY}");

  labelLY.width("100%");

  labelLY.height("100%");

  labelLY.fontColor("#003A70");

  labelLY.fontWeight("bold");

  labelLY.hAlign("center");

  labelLY.vAlign("middle");

  // set the label as the center content

  chartLY.center().content(labelLY);

​

  // Configure tooltips

  chartLY.tooltip().title().fontColor("#FFFFFF"); // Set tooltip text color

  chartLY.tooltip().title().fontSize(14); // Set tooltip font size

  chartLY.tooltip().fontColor("#FFFFFF"); // Set tooltip text color

  chartLY.tooltip().fontSize(12); // Set tooltip font size

  chartLY.tooltip().padding(10); // Set tooltip padding

  chartLY.tooltip().format("{%Value}"); // Include the name, value, and percentage in the tooltip

​

    // Customize the tooltip title and content

  chartLY.tooltip()

    .titleFormat(function () {

      return '' + this.getData('x');

    })

    .format(function () {

      return '{LY} : ' + anychart.format.number(this.getData('value'), {

        groupsSeparator: ',',

        decimalSeparator: '.'

      }) + ' US$ Million';

    });

  // Set a white border around each slice

  chartLY.stroke("1 #FFFFFF");    

  // set the chart container

  chartLY.container(stage);

  // initiate drawing the chart

  chartLY.draw();

​

  //  TODO: Create Standalone interactive legend using both charts.  

  //  https://playground.anychart.com/docs/v8/samples/CS_Legend_Standalone_02

  //  For export to svg - using the legend from one chart is sufficient  

  // For now create a standalone legend

  var legend = anychart.standalones.legend();

​

  // set the source of legend items

  legend.itemsSource([chartFY]);

​

  // set the padding of the legend

  legend.padding({ top: 10, bottom: 20 });

  legend.position("bottom");

  legend.itemsLayout("horizontal-expandable");

  // set the container for the legend

  legend.container(stage);

​

  // draw the legend

  legend.draw();

});

​