html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

// create a chart

var chart = anychart.column();

​

    // create data set on our data

    var data = [

{x: 'Apr', low: 29, high: 37},

{x: 'May'},

{x: 'Jun', low: 29, high: 47},

{x: 'Jul', low: 12, high: 27},

{x: 'Aug', low: 20, high: 33, color: "#ff0000"},

{x: 'Sep', low: 35, high: 44},

{x: 'Oct', low: 20, high: 31},

{x: 'Nov', low: 44, high: 51}

    ];

​

    // create a range column series

    var series = chart.rangeColumn(data);

    // set a meta field to use as a cherry size

    // series.meta("cherry", 50);

    // set a meta field to use as a stem thickness

    // series.meta("stem", 1);

​

    // optional: configurable select fill

    series.selected().fill("white");

​

    // call a custom function that changes series rendering

    cherryChartRendering(series);

​

    // set container id for the chart and initiate chart drawing

    chart.container('container').draw();

});

​

// custom function to change range column series rendering to 

// cherry chart with a special value line markers

function cherryChartRendering(series){

    // cherry fill color

    series.fill(function () {

// check if color is set for the point and use it or series color

color = this.iterator.get("color") || this.sourceColor;

return anychart.color.lighten(color, 0.25);

    });

    // cherry stroke color

    series.stroke(function () {

// check if color is set for the point and use it or series color

color = this.iterator.get("color") || this.sourceColor;

return anychart.color.darken(color, 0.1);

    });

​

    // set rendering settings

    series.rendering()

    // set point function to drawing

    .point(drawer)

}

​

// custom drawer function to draw a 

function drawer() {

​

    // if missing - skip drawing

    if (this.missing) {

return;

    }

​

    // get cherry size or set default

    var cherry = this.series.meta("cherry") || (this.categoryWidth / 15);

    // get stem thickness or set default

    var stem = this.series.meta("stem") || (this.categoryWidth / 50);

​

    // get shapes group

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

    // calculate the left value of the x-axis

    var leftX = this.x - stem / 2;

    // calculate the right value of the x-axis

    var rightX = leftX + stem / 2;

​

    shapes['path']

      // resets all 'path' operations

.clear()

      // draw bulb

.moveTo(leftX, this.low - cherry)

.lineTo(leftX, this.high)

.lineTo(rightX, this.high)

.lineTo(rightX, this.low - cherry)

.arcToByEndPoint(leftX, this.low - cherry, cherry, cherry, true, true)

      // close by connecting the last point with the first

.close();

}