html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // data and fill color settings

  var data = [

    {x: "earth", value: 1, palette: anychart.palettes.earth},

    {x: "monochrome", value: 1, palette: anychart.palettes.monochrome},

    {x: "provence", value: 1, palette: anychart.palettes.provence},

    {x: "morning", value: 1, palette: anychart.palettes.morning},

    {x: "coffee", value: 1, palette: anychart.palettes.coffee},

    {x: "wines", value: 1, palette: anychart.palettes.wines},

    {x: "pastel", value: 1, palette: anychart.palettes.pastel},

    {x: "blue", value: 1, palette: anychart.palettes.blue},

    {x: "glamour", value: 1, palette: anychart.palettes.glamour},

    {x: "sea", value: 1, palette: anychart.palettes.sea},

    {x: "default", value: 1, palette: anychart.palettes.defaultPalette}

  ];

​

  // chart type

  var chart = anychart.funnel(data);

​

  chart.title("Palettes Switch Sample - Click bars to change palette");

  chart.neckWidth("60%");

  chart.baseWidth("60%");  

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

  chart.legend().itemsLayout("horizontal");

  chart.overlapMode("allow-overlap");

  chart.selected().labels().background().stroke("black");

​

  // switch palette on click and update title

  chart.listen("pointMouseDown",function(e){

    chart.title(e.point.get("x"));

    chart.palette(e.point.get("palette"));

  });

​

  // draw

  chart.container("container");

  chart.draw();

});