html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

​

anychart.onDocumentReady(function () {

  // create data set on our data

  var dataSet = anychart.data.set([

    [2024, 9097, 14694, 5917, 14019, 1073, 44800],

    [2025, 9097, 15060, 6145, 12933, 1067, 44302],

    [2026, 8097, 23330, 7588, 13310, 1104, 53429],

    [2027, 10215, 25088, 8917, 15174, 1104, 60495],

    [2028, 12027, 26307, 6067, 13030, 1133, 58564],

    [2029, 7192, 16536, 6642, 3258, 1620, 35248],

    [2030, 2938, 13757, 5164, 9784, 1584, 33227],

    [2031, 6092, 20288, 5651, 10329, 2174, 44534],

    [2032, 15253, 25540, 12657, 23990, 2256, 79696]

  ]);

​

  // Map data for the series

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

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

  var Y03SeriesData = dataSet.mapAs({ x: 0, value: 3 });

  var Y04SeriesData = dataSet.mapAs({ x: 0, value: 4 });

  var Y05SeriesData = dataSet.mapAs({ x: 0, value: 5 });

  var totalSeriesData = dataSet.mapAs({ x: 0, value: 6 });

​

  // Create bar chart

  var chart = anychart.column();

​

  anychart.theme(anychart.themes.marketForecast);

​

  chart

    .credits()

    .enabled(true)

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

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

    .text('Copyright MarketForecast FY');

​

  // Force chart to stack values by Y scale.

  chart.yScale().stackMode('value');

​

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .padding([0, 0, 10, 0])

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

      '<br/><span style="color:#929292; font-size: 12px;">' +

      'Market Forecast {FY} - {LY}</span>');

​

  // Set chart margin settings

  chart.padding(10, 5, 5, 5);

​

  // Grid settings

  chart.yGrid(true).xGrid(false).xMinorGrid(false).yMinorGrid(true);

​

  // Set chart legend settings

  chart.legend().enabled(true).padding({ top: 10, bottom: 30 });

  chart.legend().position("bottom");

  chart.legend().itemsLayout("horizontal-expandable");

​

  chart.yAxis(0)

    .title("Market size in US$ Millions")

    .title().padding(10)

    .fontColor("#385D8A"); // Change color of Y-axis title

​

  chart.yAxis(0)

    .labels().format(function () {

      return anychart.format.number(this.value, {

        groupsSeparator: ','

      });

    });

​

  // Helper function to setup label settings for all series

  var setupSeriesLabels = function (series, name) {

    series.name(name).stroke('1 #fff 1');

    series.hovered().stroke('1 #fff 1');

  };

​

  // Create series with mapped data

  var series1 = chart.column(Y01SeriesData);

  setupSeriesLabels(series1, 'North America');

​

  var series2 = chart.column(Y02SeriesData);

  setupSeriesLabels(series2, 'Europe');

​

  var series3 = chart.column(Y03SeriesData);

  setupSeriesLabels(series3, 'APAC');

​

  var series4 = chart.column(Y04SeriesData);

  setupSeriesLabels(series4, 'Middle-East & Africa');

​

  var series5 = chart.column(Y05SeriesData);

  setupSeriesLabels(series5, 'Latin America');

​

  // Set global tooltip styles

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

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

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

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

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

​

  // Customize the tooltip title and content

  chart.tooltip()

    .titleFormat(function () {

      return 'Market Forecast: ' + this.points[0].x;

    })

    .format(function () {

      return this.seriesName + ' : ' + anychart.format.number(this.value, {

        groupsSeparator: ',',

        decimalSeparator: '.'

      }) + ' US$ Million';

    });

​

  // Set interactivity hover

  chart.interactivity().hoverMode('by-y');

​

  chart.tooltip().valuePrefix('$').displayMode('union');

​

  // Create a line series for total Market Forecast

  var totalSeriesForecast = chart.marker(totalSeriesData);

  totalSeriesForecast.name('Total Market Forecast'); // Rename the totalSeriesForecast

​

​

// Add labels to totalSeriesForecast with format

totalSeriesForecast.labels()

  .enabled(true)

  .format(function () {

    return anychart.format.number(this.value, {

      groupsSeparator: ','

    });

  })

  .anchor('center-bottom')

  .offsetY(10) // Adjust offsetY to position the label above the column

  .padding(5)

  .background().enabled(true).fill("#FFFFFF"); // Add background color

​

  // Set container id for the chart

  chart.container('container');

​

  // Initiate chart drawing

  chart.draw();

});

​