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([

//['Material', Argentina, Australia, Belgium, Bolivia, Brazil, Canada, Chile, China, DR Congo, Germany, Guinea-Bissau, India, Indonesia, Japan, Kazakhstan, Madagascar, Mexico, Mongolia, Mozambique, Myanmar, Nigeria, Norway, Peru, Russia, Rwanda, Ukraine, United States, Vietnam, Zambia, Zimbabwe, Rest of the World]

['Germanium', , , 5.6, , , , , 116.2, , 4.2, , , , , , , , , , , , , , 7, , , , , , , 7],

['Platinum', , , , , , 48.698, , , , , , , , , , , , , , , , , , 20.0411, , , 33.714, , , 14.984, 69.5629],

['Gallium', , , , , , , , 272.6, , , , , , , , , , , , , , , , , , , , , , , 17.4],

['Beryllium', , , , , , , , 85.8, , , , , , , , , , , 13.2, , , , , , , , 221.1, , , , 9.9],

['Indium', , , , , , 37.126, , 649.705, , , , , , 53.735, , , , 200.285, , , , , , , , , , , , , 36.149],

['Tantalum', , , , , 360, , , 79, 980, , , , , , , , , , , , 110, , , , 520, , , , , , 360],

['Dysprosium', , 135, , , , , , 1800, , , , , , , , , , , , 285, , , , , , , 322.5, , , , 107.5],

['Neodymium', , 3069, , , , , , 40920, , , , , , , , , , , , 6479, , , , , , , 7331.5, , , , 2441.5],

['Tungsten/Wolfram', , , , , , , , 67080, , , , , , , , , , , , , , , , 2340, , , 3120, 2340, , , 3120],

['Niobium', , , , , 76360, 5810, , , , , , , , , , , , , , , , , , , , , , , , , 830],

['Lithium', 19800, , , , , , 57600, 100800, , , , , , , , , , , , , , , , , , , , , , , 1800],

['Titanium Metal', , , , , , , , 120000, , , , , , 35000, 16000, , , , , , , , , 27000, , 5400, , , , , 250],

['Cobalt', , 5900, , , , , , , 170000, , , , 17000, , , , , , , , , , , 7500, , , , , , , 20200],

['Magnesium', , , , , , , , 1019200, , , , , , , , , , , , , , , , , , , 33600, , , , 67200],

['Graphite', , , , , 73000, , , 1230000, , , , , , , , 100000, , , 96000, , , , , , , , , , , , 88650],

['Nickel', , 165000, , , , 198000, , 1089000, , , , , 396000, 297000, , , , , , , , , , 231000, , , , , , , 924000],

['Silicon Metal', , , , , 200000, , , 3000000, , , , , , , , , , , , , , 140000, , , , , , , , , 421000],

['Zinc', , 1300000, , 494000, , , , 4199000, , , , 806000, , , , , 715000, , , , , , 1599000, , , , 741000, , , , 3146000],

['Copper', , 880000, , , , , 5060000, 1760000, 2420000, , , , 880000, , 660000, , 660000, , , , , , 2640000, 880000, , , 1100000, , 660000, , 4400000],

['Aluminium/Bauxite', , 19600000, , , 6000000, , , 13600000, , , 19400000, 5200000, 4200000, , , , , , , , , , , , , , , , , , 3700000]

  ]);

​

  // map data for the first series, take x from the zero column and value from the first column of data set

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

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

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

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

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

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

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

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

 var DRCongoData = dataSet.mapAs({ x: 0, value: 9});

 var GermanyData = dataSet.mapAs({ x: 0, value: 10});

 var GuineaBissauData = dataSet.mapAs({ x: 0, value: 11});

 var IndiaData = dataSet.mapAs({ x: 0, value: 12});

 var IndonesiaData = dataSet.mapAs({ x: 0, value: 13});

 var JapanData = dataSet.mapAs({ x: 0, value: 14});

 var KazakhstanData = dataSet.mapAs({ x: 0, value: 15});

 var MadagascarData = dataSet.mapAs({ x: 0, value: 16});

 var MexicoData = dataSet.mapAs({ x: 0, value: 17});

 var MongoliaData = dataSet.mapAs({ x: 0, value: 18});

 var MozambiqueData = dataSet.mapAs({ x: 0, value: 19});

 var MyanmarData = dataSet.mapAs({ x: 0, value: 20});

 var NigeriaData = dataSet.mapAs({ x: 0, value: 21});

 var NorwayData = dataSet.mapAs({ x: 0, value: 22});

 var PeruData = dataSet.mapAs({ x: 0, value: 23});

 var RussiaData = dataSet.mapAs({ x: 0, value: 24});

 var RwandaData = dataSet.mapAs({ x: 0, value: 25});

 var UkraineData = dataSet.mapAs({ x: 0, value: 26});

 var UnitedStatesData = dataSet.mapAs({ x: 0, value: 27});

 var VietnamData = dataSet.mapAs({ x: 0, value: 28});

 var ZambiaData = dataSet.mapAs({ x: 0, value: 29});

 var ZimbabweData = dataSet.mapAs({ x: 0, value: 30});

 var RestoftheWorldData = dataSet.mapAs({ x: 0, value: 31});

​

  // create bar chart

  var chart = anychart.bar();

  anychart.theme(anychart.themes.marketForecast);  

​

  // turn on chart animation

  chart.animation(true);

​

  // force chart to stack values by Y scale.

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

​

    chart

    .title()

    .enabled(true)

    .useHtml(true)

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

    .text(

      '<span style="font-size: 16px;font-weight:bold;">Critical Raw Materials</span>' +

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

      'Combat Aircraft</span>'

    );

​

  // set yAxis labels formatting, force it to add % to values

  chart.yAxis(0).labels().format('{%Value}%');

​

  // helper function to setup label settings for all series

  var setupSeries = function (series, name) {

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

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

  };

​

  // temp variable to store series instance

  var series;

​

 series = chart.bar(ArgentinaData);  setupSeries(series, 'Argentina');

 series = chart.bar(AustraliaData);  setupSeries(series, 'Australia');

 series = chart.bar(BelgiumData);  setupSeries(series, 'Belgium');

 series = chart.bar(BoliviaData);  setupSeries(series, 'Bolivia');

 series = chart.bar(BrazilData);  setupSeries(series, 'Brazil');

 series = chart.bar(CanadaData);  setupSeries(series, 'Canada');

 series = chart.bar(ChileData);  setupSeries(series, 'Chile');

 series = chart.bar(ChinaData);  setupSeries(series, 'China');

 series = chart.bar(DRCongoData);  setupSeries(series, 'DR Congo');

 series = chart.bar(GermanyData);  setupSeries(series, 'Germany');

 series = chart.bar(GuineaBissauData);  setupSeries(series, 'Guinea-Bissau');

 series = chart.bar(IndiaData);  setupSeries(series, 'India');

 series = chart.bar(IndonesiaData);  setupSeries(series, 'Indonesia');

 series = chart.bar(JapanData);  setupSeries(series, 'Japan');

 series = chart.bar(KazakhstanData);  setupSeries(series, 'Kazakhstan');

 series = chart.bar(MadagascarData);  setupSeries(series, 'Madagascar');

 series = chart.bar(MexicoData);  setupSeries(series, 'Mexico');

 series = chart.bar(MongoliaData);  setupSeries(series, 'Mongolia');

 series = chart.bar(MozambiqueData);  setupSeries(series, 'Mozambique');

 series = chart.bar(MyanmarData);  setupSeries(series, 'Myanmar');

 series = chart.bar(NigeriaData);  setupSeries(series, 'Nigeria');

 series = chart.bar(NorwayData);  setupSeries(series, 'Norway');

 series = chart.bar(PeruData);  setupSeries(series, 'Peru');

 series = chart.bar(RussiaData);  setupSeries(series, 'Russia');

 series = chart.bar(RwandaData);  setupSeries(series, 'Rwanda');

 series = chart.bar(UkraineData);  setupSeries(series, 'Ukraine');

 series = chart.bar(UnitedStatesData);  setupSeries(series, 'United States');

 series = chart.bar(VietnamData);  setupSeries(series, 'Vietnam');

 series = chart.bar(ZambiaData);  setupSeries(series, 'Zambia');

 series = chart.bar(ZimbabweData);  setupSeries(series, 'Zimbabwe');

 series = chart.bar(RestoftheWorldData);  setupSeries(series, 'Rest of the World');

​

  // turn on legend

  chart.legend().enabled(true).fontSize(14).padding([0, 0, 15, 0]).itemsLayout("horizontal-expandable") ;

​

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

​

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

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});