html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // add the data

  let data = anychart.data.set([

    ["Chennai Super Kings", 5, "CSK"],

    ["Mumbai Indians", 5, "MI"],

    ["Kolkatta Knight Riders", 2, "KKR"],

    ["Deccan Chargers", 1, "DC"],

    ["Gujarat Titans", 1, "GT"],

    ["Rajasthan Royal", 1, "RR"],

    ["Sunrisers Hyderabad", 1, "SRH"]

  ]);

  // create a pie chart with the data, naming the values in the dataset

  let chart = anychart.pie(data.mapAs({name: 0, value: 1, abbr: 2}));

​

  // create a custom palette

  let palette = anychart.palettes.distinctColors();

  // set the colors according to the team brands

  palette.items([

    {color: "#004f91"},

    {color: "#fcce06"},

    {color: "#3a225d"},

    {color: "#9a1c22"},

    {color: "#254aa5"},

    {color: "#D9E3EF"},

    {color: "#02183c"}

  ]);

  // set the palette to the chart

  chart.palette(palette);

  // configure the labels

  chart

    .labels()

    .format("{%abbr} — {%value}")

    .fontSize(14)

    .position("outside");

​

  // disable the chart legend

  chart.legend(false);

​

  // format the tooltip

  chart

    .tooltip()

    .format("Percent of total wins: {%PercentValue}{decimalsCount: 1}%");

​

  // set chart title text settings

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .text(

      '<span style = "color: #111; font-size:20px; margin-bottom:10px; dy:20px">IPL Winnership Over 16 Seasons</span>' +

        '<br/><span style="color:#173685; font-size: 15px;">Among the 10 current IPL teams, 2 dominate, and 3 have never won the title</span>'

    );

​

  // set container id for the chart

  chart.container("container");

​

  // initiate chart drawing

  chart.draw();

});