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, 2142, 3211 , 50153],

    [2025, 9097, 15060, 6145, 12933, 1067, 2240, 3251, 49793],

    [2026, 8097, 23330, 7588, 13310, 1104, 2400, 3400, 59229],

    [2027, 10215, 25088, 8917, 15174, 1104, 2450, 3450, 66395],

    [2028, 12027, 26307, 6067, 13030, 1133, 2600, 3600, 64764],

    [2029, 7192, 16536, 6642, 3258, 1620, 2800, 3500, 39797],

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

    [2031, 6092, 20288, 5651, 10329, 2174,3150, 4000, 51684],

    [2032, 15253, 25540, 12657, 23990, 2256, 3250, 4250, 87196]

  ]);

​

  // 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 Y06SeriesData = dataSet.mapAs({ x: 0, value: 6 });

  var Y07SeriesData = dataSet.mapAs({ x: 0, value: 7 });  

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

​

  // 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;">{SEGMENT1ITEM} - {TOPIC} Market Forecast to {LY} by {SEGMENT2}</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.yAxis(0)

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

    .title().padding(20)

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

​

  chart.yAxis(0)

    .labels().format(function () {

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

        groupsSeparator: ','

      });

    });

​

  // Create a line series for total Market Forecast

  // Create this line as first line - this will make the marker a circle

  var totalSeriesForecast = chart.spline(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  

  // 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, 'segment2 item1');

​

  var series2 = chart.column(Y02SeriesData);

  setupSeriesLabels(series2, 'segment2 item2');

​

  var series3 = chart.column(Y03SeriesData);

  setupSeriesLabels(series3, 'segment2 item3');

​

  var series4 = chart.column(Y04SeriesData);

  setupSeriesLabels(series4, 'segment2 item4');

​

  var series5 = chart.column(Y05SeriesData);

  setupSeriesLabels(series5, 'segment2 item5');

  var series6 = chart.column(Y06SeriesData);

  setupSeriesLabels(series6, 'segment2 item6');

​

  var series7 = chart.column(Y07SeriesData);

  setupSeriesLabels(series7, 'segment2 item7');  

​

  // 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');

​

  // Set container id for the chart

  chart.container('container');

​

  // Initiate chart drawing

  chart.draw();

});

​