html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  var color1 = "#FF0000";

​

  // Variable for controlling color enlightenment

  var colorIndex = 0;

​

  // color lightning function

  function colorizer(){

     var mixColor1 = anychart.color.lighten(color1, colorIndex);

     colorIndex = colorIndex + 0.2;

     return mixColor1;

  }

​

  // data and fill color settings

  var data = anychart.data.set([

    {x: "P1", value: 10000, fill: (colorizer())},

    {x: "P2", value: 12000, fill: (colorizer())},

    {x: "P3", value: 18000, fill: (colorizer())},

    {x: "P4", value: 13000, fill: (colorizer())},

    {x: "P5", value: 9000, fill: (colorizer())}

  ]);

​

  // chart type

  var chart = anychart.column();

​

  chart.title("Lighten Colors Sample");

​

  // set data and set additional information in tooltip

  var series = chart.column(data);

  series.stroke(null);

  var tooltip = series.tooltip();

  tooltip.format(function(){

    var mixColor2 = anychart.color.lighten(color1, (this.index * 0.2));

    return "Input Color: " + color1 +

      "\nLighten Ratio: " + this.index * 2 / 10 +

      "\nResult: " + mixColor2;

  });

​

  // draw

  chart.container("container");

  chart.draw();

});