html,

body,

#container {

  width: 200px;

  height: 400px;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create data set on our data

  var dataSet = anychart.data.set([

    ['Reynaers', 12814, 3054],

    ['Roval', 10814, 20123]

  ]);

​

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

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

​

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

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

​

  // create bar chart

  var chart = anychart.column3d();

​

  // force chart to stack values by Y scale.

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

​

  // turn on chart animation

  chart.animation(true);

​

  // set chart title text settings

  chart.title('');

  chart.contextMenu(false);

​

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

  chart.yAxis(0).labels().format('');

​

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

  };

​

  // temp variable to store series instance

  var series;

​

  // create first series with mapped data

  series = chart.column(firstSeriesData);

  setupSeries(series, 'Florida');

​

  // create second series with mapped data

  series = chart.column(secondSeriesData);

  setupSeries(series, 'Texas');

​

  var tooltip = series.tooltip();

  tooltip.enabled(false);

​

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

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

​

  // turn on legend

  chart.legend().enabled(false);

​

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});