html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // create data set with raw data (absolute numbers)

    var rawData = [

        ['11 Oct', 100, 80, 40, 15, 10],  // Candidates Distributed, Clicked Booking Link, etc.

        ['12 Oct', 90, 70, 35, 12, 8],

        ['13 Oct', 95, 78, 45, 16, 10],

        ['14 Oct', 84, 65, 36, 14, 8],

        ['15 Oct', 80, 60, 32, 12, 7],

        ['16 Oct', 75, 55, 30, 11, 6],

        ['17 Oct', 70, 50, 25, 9, 5],

        ['18 Oct', 65, 45, 22, 8, 4],

        ['19 Oct', 60, 40, 20, 7, 4]

    ];

​

    // Function to calculate percentages relative to Candidates Distributed (total)

    var percentageData = rawData.map(function (row) {

        var total = row[1]; // Candidates Distributed is the baseline

        // Ensure that we do not calculate over 100%

        var clickedBookingLinkPercent = Math.min(Math.round((row[2] / total) * 100), 100);

        var interviewBookedPercent = Math.min(Math.round((row[3] / total) * 100), 100);

        var clickedReviewsLinkPercent = Math.min(Math.round((row[4] / total) * 100), 100);

        var clickedInterviewLinkPercent = Math.min(Math.round((row[5] / total) * 100), 100);

        return [

            row[0], // Date

            100, // Candidates Distributed is always 100% (it is the baseline)

            clickedBookingLinkPercent,

            interviewBookedPercent,

            clickedReviewsLinkPercent,

            clickedInterviewLinkPercent

        ];

    });

​

    // create data set for percentage data

    var dataSet = anychart.data.set(percentageData);

​

    // map data for each series

    var seriesData_1 = dataSet.mapAs({'x': 0, 'value': 1}); // Candidates Distributed (always 100%)

    var seriesData_2 = dataSet.mapAs({'x': 0, 'value': 2}); // Clicked Booking Link %

    var seriesData_3 = dataSet.mapAs({'x': 0, 'value': 3}); // Interview Booked %

    var seriesData_4 = dataSet.mapAs({'x': 0, 'value': 4}); // Clicked Reviews Link %

    var seriesData_5 = dataSet.mapAs({'x': 0, 'value': 5}); // Clicked Interview Link %

​

    // create area chart

    var chart = anychart.area();

​

    // turn on chart animation

    chart.animation(true);

​

    // turn on the crosshair

    chart.crosshair().enabled(true).yLabel().enabled(false);

    chart.crosshair().enabled(true).xLabel().enabled(false);

    chart.crosshair().yStroke(null).xStroke('#fff').zIndex(99);

​

    // set yAxis labels formatting to show percentages with no decimal points

    chart.yAxis(0).labels().format("{%Value}%").fontSize(12);

​

    // helper function to setup label settings for all series

    var setupSeries = function (series, name, color) {

        series.stroke('3 #fff 1');

        series.fill(color || function () {

            return this.sourceColor + ' 0.8';

        });

        series.name(name);

        series.markers().zIndex(100);

        series.clip(false);

        series.hovered()

            .stroke('3 #fff 1')

            .markers().enabled(true).type('circle').size(4).stroke('1.5 #fff');

    };

​

    // create first series (Candidates %)

    var series1 = chart.area(seriesData_1);

    setupSeries(series1, 'Candidates %');

​

    // create second series (Clicked Booking Link %)

    var series2 = chart.area(seriesData_2);

    setupSeries(series2, 'CBL %');

​

    // create third series (Interview Booked %)

    var series3 = chart.area(seriesData_3);

    setupSeries(series3, 'IB %');

​

    // create fourth series (Clicked Reviews Link %)

    var series4 = chart.area(seriesData_4);

    setupSeries(series4, 'CRL %');

​

    // create fifth series (Clicked Interview Link %)

    var series5 = chart.area(seriesData_5);

    setupSeries(series5, 'CIL %');

​

    // set interactivity and tooltip settings

    chart.interactivity().hoverMode('by-x');

    chart.tooltip().displayMode('union');

​

    // turn on legend

    chart.legend().enabled(true).fontSize(13).padding([0, 0, 25, 0]);

​

    // set container id for the chart

    chart.container('container');

​

    // initiate chart drawing

    chart.draw();

});

​