html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a stage

    var stage = anychart.graphics.create("container");

​

    // create a data set for the first chart

    var data1 = anychart.data.set([

      ["Q 1", 10000, 12000, 16000],

      ["Q 2", 12000, 15000, 17000],

      ["Q 3", 20000, 19000, 21000],

      ["Q 4", 16000, 21000, 22000]

    ]);

​

    // create a data set for the second chart

    var data2 = anychart.data.set([

      ["Q 1", 13000, 15000, 18000],

      ["Q 2", 10000, 12000, 11000],

      ["Q 3", 18000, 21000, 13000],

      ["Q 4", 21000, 20000, 22000]

    ]);

​

    // create and configure the first chart

    var chart1 = anychart.line();

    chart1.spline(data1.mapAs({x: 0, value: 1})).name("John");

    chart1.spline(data1.mapAs({x: 0, value: 2})).name("Larry");

    chart1.spline(data1.mapAs({x: 0, value: 3})).name("Marta");

    chart1.bounds(0, "10%", "50%", "90%");

    chart1.title("2017");

    // set the chart container

    chart1.container(stage);

    // initiate drawing the chart

    chart1.draw();   

​

    // create and configure the second chart

    var chart2 = anychart.line();

    chart2.spline(data2.mapAs({x: 0, value: 1})).name("John");

    chart2.spline(data2.mapAs({x: 0, value: 2})).name("Larry");

    chart2.spline(data2.mapAs({x: 0, value: 3})).name("Marta");

    chart2.bounds("50%", "10%", "50%", "90%");

    chart2.title("2018");

    // set the chart container

    chart2.container(stage);

    // initiate drawing the chart

    chart2.draw();

​

    // create a standalone legend

    var legend = anychart.standalones.legend();

​

    // create an array for storing legend items

    var legendItems = [];

​

    // push legend items to the array

    for (var i = 0; i < chart1.getSeriesCount(); i++) {

      var series = chart1.getSeriesAt(i);

      legendItems.push({

        text: series.name(),

        iconType: "spline",

        iconStroke: {color: series.color(), thickness: 3}

      });

    }

​

    // add items to the legend

    legend.items(legendItems);

​

    // set the padding of the legend

    legend.padding(10);

​

    /* listen to the legendItemClick event,

    enable/disable the series on both charts,

    and configure the appearance of the legend item */

    legend.listen("legendItemClick", function(e) {

      var index = e.itemIndex;

      var series1 = chart1.getSeriesAt(index);

      var series2 = chart2.getSeriesAt(index);

      if (series1.enabled()) {

        series1.enabled(false);

        series2.enabled(false);

        legendItems[index].iconStroke = "3 #999999";

        legendItems[index].fontColor = "#999999";

        legend.itemsFormatter(function() {return legendItems});

      } else {

        series1.enabled(true);

        series2.enabled(true);

        legendItems[index].iconStroke = {

          color: series1.color(),

          thickness: 3

        }

        legendItems[index].fontColor = series1.color();

        legend.itemsFormatter(function() {return legendItems});

      }

    });

    /* listen to the legendItemMouseOver event

    and configure the appearance of the series on both charts */

    legend.listen("legendItemMouseOver", function(e) {

      var series1 = chart1.getSeriesAt(e.itemIndex);

      var series2 = chart2.getSeriesAt(e.itemIndex);

      series1.stroke(anychart.color.lighten(series1.color()), 5);

      series2.stroke(anychart.color.lighten(series2.color()), 5);

    });

    /* listen to the legendItemMouseOver event

    and reset the appearance of the series on both charts */

    legend.listen("legendItemMouseOut", function(e) {

      var series1 = chart1.getSeriesAt(e.itemIndex);

      var series2 = chart2.getSeriesAt(e.itemIndex);

      series1.stroke(series1.color(), 1.5);

      series2.stroke(series2.color(), 1.5);

    });

    // set the container for the legend

    legend.container(stage);

    // draw the legend

    legend.draw();

});