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

['Aluminium/Bauxite', 55180000, 760000, 15760000, 0, 71700000],

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

['Cobalt', 43100, 170000, 7500, 0, 220600],

['Copper', 12760000, 2420000, 3300000, 3520000, 22000000],

['Dysprosium', 764.85, 58.35, 1819.5, 7.3, 2650],

['Gallium', 5.8, 0, 278.4, 5.8, 290],

['Germanium', 15.4, 0, 123.2, 1.4, 140],

['Graphite', 235042.83, 96500, 1254100, 2007.17, 1587650],

['Indium', 321.433, 0, 654.59, 0.977, 977],

['Lithium', 77400, 0, 100800, 1800, 180000],

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

['Neodymium', 17387.59, 1326.49, 41363.3, 163.62, 60241],

['Nickel', 1056000, 0, 1320000, 924000, 3300000],

['Niobium', 82170, 0, 0, 830, 83000],

['Platinum', 97.396, 0, 20.0411, 69.5629, 187],

['Silicon Metal', 626000, 0, 3055000, 80000, 3761000],

['Tantalum', 360, 1610, 79, 360, 2409],

['Titanium Metal', 40650, 0, 163000, 0, 203650],

['Tungsten/Wolfram', 4680, 2340, 69420, 1560, 78000],

['Zinc', 6149000, 0, 4706000, 2145000, 13000000]

  ]);

​

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

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

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

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

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

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

  // create bar chart

  var chart = anychart.column();

​

  anychart.theme(anychart.themes.marketForecast);  

​

  chart.xAxis().labels().rotation(-90);

  // 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;">Dependence and Volume of CRMs by Supplying Countries</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}%');

  chart.yAxis(0).title("Low / Medium / High Risk Countries (Share)");  

  chart.yAxis(1).title("Global Production (Mt)");

    // adding extra Y scale

  var extraYScale = anychart.scales.linear();

    // adding and adjust extra Y axis

  var extraYAxis = chart.yAxis(1);

  extraYAxis.orientation("right");

  extraYAxis.scale(extraYScale);

  // helper function to setup label settings for all series

  var setupSeries = function (series, name) {

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

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

  };

​

  var lineSeries = chart.line(GlobalData);

  lineSeries.yScale(extraYScale); 

  lineSeries.name('Global Production(Mt)');

  // temp variable to store series instance

 var series;

​

 series = chart.column(LowRiskData);  setupSeries(series, 'Low Risk Countries');

 series = chart.column(MedRiskData);  setupSeries(series, 'Medium Risk Countries');

 series = chart.column(HighRiskData);  setupSeries(series, 'High Risk Countries');

 series = chart.column(RoWData);  setupSeries(series, 'Rest of the World');

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

  chart.tooltip().titleFormat('{%X}').displayMode('union');

​

  // turn on legend

  // Set chart legend settings

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

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

​

  // set container id for the chart

  chart.container('container');

​

  // initiate chart drawing

  chart.draw();

});