html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create column chart

  var chart = anychart.column();

​

  var dataSet = anychart.data.set([

    ['Lip gloss', 22998, 12043],

    ['Eyeliner', 12321, 15067],

    ['Eyeshadows', 12998, 12043],

    ['Powder', 10261, 14419],

    ['Mascara', 11261, 10419]

  ]);

​

  // set chart title

  chart.title('Top 5 Products by Revenue in two Regions');

​

  // 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 first series with mapped data

  var seriesFirst = chart.column(firstSeriesData);

  seriesFirst.name('Florida');

​

  var shapes = seriesFirst.rendering().shapes();

​

  seriesFirst.color('#3F9CD7');

  // set rendering settings

  seriesFirst

    .rendering()

    // set point function to drawing

    .point(drawer)

    // set update point function to drawing, change the point shape when the state changes

    .updatePoint(drawer)

    // set shapes

    .shapes(shapes);

​

  var seriesSecond = chart.column(secondSeriesData);

  seriesSecond

    .name('Texas')

    .color('#F37E59')

    .stroke(anychart.color.darken(this.sourceColor, 1));

  // set rendering settings

  seriesSecond

    .rendering()

    // set point function to drawing

    .point(drawer)

    // set update point function to drawing, change the point shape when the state changes

    .updatePoint(drawer)

    // set shapes

    .shapes(shapes);

​

  // set titles for Y-axis

  chart.yAxis().title('Revenue in Dollars');

  // set minimum for y-scale

  chart.yScale().minimum(0);

  // set tooltip prefix

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

  // turn on legend

  chart.legend(true);

  // set container id for the chart

  chart.container('container');

  // initiate chart drawing

  chart.draw();

});

​

function drawer() {

  // if missing (not correct data), then skipping this point drawing

  if (this.missing) {

    return;

  }

​

  // get shapes group

  var shapes = this.shapes || this.getShapesGroup(this.pointState);

  // calculate the left value of the x-axis

  var leftX = this.x - this.pointWidth / 2;

  // calculate the right value of the x-axis

  var rightX = leftX + this.pointWidth;

  // calculate the half of point width

  var rx = this.pointWidth / 2;

​

  shapes.path

    // resets all 'line' operations

    .clear()

    // draw column with rounded edges

    .moveTo(leftX, this.zero)

    .lineTo(leftX, this.value + rx)

    .circularArc(leftX + rx, this.value + rx, rx, rx, 180, 180)

    .lineTo(rightX, this.zero)

    // close by connecting the last point with the first straight line

    .close();

}