html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create a bar chart

  var chart = anychart.bar();

​

  // data

  var winlossData = [

    [65, 17, "2015-16"],

    [61, 21, "2014-15"],

    [55, 27, "2013-14"],

    [37, 45, "2012-13"],

    [25, 41, "2011-12"],

    [25, 57, "2010-11"],

    [25, 57, "2009-10"],

    [17, 65, "2008-09"],

    [25, 57, "2007-08"],

    [40, 42, "2006-07"],

    [37, 45, "2005-06"],

    [48, 34, "2004-05"],

    [26, 56, "2003-04"],

    [32, 50, "2002-03"],

    [24, 58, "2001-02"],

    [26, 56, "2000-01"],

    [15, 67, "1999-00"],

    [19, 31, "1998-99"],

    [21, 61, "1997-98"],

    [26, 56, "1996-97"]

  ];

​

  // configure a function to create series

  var createSeries = function (columnNumber, name) {

    var data = [];

    for (var i = 0; i < winlossData.length; i++) {

​

      // calculate percentages for the tooltip

      var val = winlossData[i][columnNumber] * 100;

      if (columnNumber == 0) {

        var percentValue =

          val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);

      } else {

        var percentValue =

          val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);

      }

      percentValue = percentValue.toFixed(2);     

      var value = winlossData[i][columnNumber];

      var center = 0;

      if (name === "Wins") {

        data.push({

          x: winlossData[i][2],

          low: center,

          high: center + value,

          value: value,

          // add the calculated percentage value

          percentValue: percentValue

        });

      } else {

        data.push({

          x: winlossData[i][2],

          low: -center,

          high: -center - value,

          value: value,

          // add the calculated percentage value

          percentValue: percentValue

        });

      }

    }

    var series = chart.rangeBar(data);

    series.name(name).stroke("3 #fff 1").selectionMode("none");

  };

​

  // create series

  createSeries(0, "Losses");

  createSeries(1, "Wins");

​

  // set the chart title

  chart

    .title()

    .enabled(true)

    .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

​

  // enable the chart legend

  chart

    .legend()

    .enabled(true);

  // create a stacked bar chart from the multi-series bar chart

  chart.yScale().stackMode("value");

  // customize the settings of the axes

  chart

    .xAxis()

    .ticks(false);

  chart

    .xAxis()

    .title()

    .enabled(true)

    .text("Years")

    .padding([0, 0, 10, 0]);

  chart

    .xAxis()

    .labels()

    .fontSize(11)

    .fontColor("#474747")

    .padding([0, 10, 0, 0]);

  chart.yScale().maximum(80);

  chart

    .yAxis(0)

    .labels()

    .format(function () {

      return Math.abs(this.value);

    });

​

  // create a line marker at 0

  chart

    .lineMarker()

    .value(0)

    .stroke("#CECECE");

  // customize the tooltip

  chart

    .tooltip()

    .useHtml(true)

    .fontSize(12)

    .titleFormat(function () {

      return this.getData("x") + " " + this.seriesName;

    })

    .format(function () {

      return (

        "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Total games: " +

        "<b>" +

        this.getData("value") +

        "</b></h6>" +

        "<h6 style='font-size:12px; font-weight:400; margin: 0.25rem 0;'>Percentage games: " +

        "<b>" +

        this.getData("percentValue") +

        " %</b></h6>"

      );

    });

  // set a custom color palette

  chart.palette(

    anychart.palettes.distinctColors().items(["#FDB827", "#542583"])

  );

​

  // set a container id for the chart

  chart.container("container");

  // initiate chart drawing

  chart.draw();

​

});