<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>

<div id="container"></div>

 html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

anychart.onDocumentReady(function () {
  
  // add data
  var data = [
    ["2003", 1, 0, 0],
    ["2004", 4, 0, 0],
    ["2005", 6, 0, 0],
    ["2006", 9, 1, 0],
    ["2007", 12, 2, 0],
    ["2008", 13, 5, 1],
    ["2009", 15, 6, 1],
    ["2010", 16, 9, 1],
    ["2011", 16, 10, 4],
    ["2012", 17, 11, 5],
    ["2013", 17, 13, 6],
    ["2014", 17, 14, 7],
    ["2015", 17, 14, 10],
    ["2016", 17, 14, 12],
    ["2017", 19, 16, 12],
    ["2018", 20, 17, 14],
    ["2019", 20, 19, 16],
    ["2020", 20, 20, 17],
    ["2021", 20, 20, 20],
    ["2022", 20, 22, 20]
  ];
  
  // create a data set
  var dataSet = anychart.data.set(data);

  // map the data for all series
  var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
  var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
  var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

  // create a line chart
  var chart = anychart.line();

  // create the series and name them
  var firstSeries = chart.line(firstSeriesData);
  firstSeries.name("Roger Federer");
  var secondSeries = chart.line(secondSeriesData);
  secondSeries.name("Rafael Nadal");
  var thirdSeries = chart.line(thirdSeriesData);
  thirdSeries.name("Novak Djokovic");

  // add a legend and customize it
  chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);
  
  // add a title and customize it
  chart
    .title()
    .enabled(true)
    .useHtml(true)
    .text(
      '<span style="color: #006331; font-size: 20px;">Big Three&#39;s Grand Slam Title Race</span>' +
        '<br/><span style="font-size: 16px;">(Triumphs at Australian Open, French Open, Wimbledon, U.S. Open)</span>'
    );
  
  // name the axes
  chart.yAxis().title("Titles won");
  chart.xAxis().title("Year");
  
  // customize the series markers
  firstSeries.hovered().markers().type("circle").size(4);
  secondSeries.hovered().markers().type("circle").size(4);
  thirdSeries.hovered().markers().type("circle").size(4);
  
  // turn on crosshairs and remove the y hair
  chart.crosshair().enabled(true).yStroke(null).yLabel(false);
  
  // change the tooltip position
  chart.tooltip().positionMode("point");
  chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);
  
  // customize the series stroke in the normal state
  firstSeries.normal().stroke("#7b60a2", 2.5);
  secondSeries.normal().stroke("#db7346", 2.5);
  thirdSeries.normal().stroke("#43a7dc", 2.5);
  
  // specify where to display the chart
  chart.container("container");
  
  // draw the resulting chart
  chart.draw();
  
});