JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.css">
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* style for default context menu */
        .customContext {
            font-style: italic;
            background: #d3d3d3;
            text-shadow: 1px 1px #fcfff6;
        }

JavaScript

anychart.onDocumentReady(function() {

    // variable to help us define screen proportions
    var flag;

    // data for the charts
    var swag_level = anychart.data.set([
        ['2010', 15],
        ['2011', 16],
        ['2012', 16],
        ['2013', 17],
        ['2014', 25],
        ['2015', 67],
        ['2016', 81]
    ]);

    // helper function to setup same settings for all Axis Titles
    var setupChartAxisTitles = function(chart, titleX, titleY) {
        chart.xAxis().labels().fontSize(11).padding([0, 0, 0, 0]);
        chart.yAxis().labels().fontSize(11).padding([0, 0, 0, 0]);
        if (titleX) chart.xAxis().title().enabled(true).text(titleX).fontSize(12).margin(0).padding([3, 0, 0, 0]);
        if (titleY) chart.yAxis().title().enabled(true).text(titleY).fontSize(12).margin(0).padding([0, 0, 3, 0]);
    };

    // helper function to setup same settings for all Charts
    var setupChartSettings = function(chart) {
        chart.container(stage);
        chart.margin(0);
        chart.padding([15, 30, 15, 15]);
        chart.title().fontColor('#212121').fontSize(13).padding([0, 0, 10, 0]);
        chart.draw();
    };

    // create stage for all charts
    stage = acgraph.create('container');

    var title = anychart.standalones.title();
    title.text('Swag-O-meter statictics');
    title.background('#ffffff');
    title.padding(10);
    title.container(stage);
    title.draw();

    var columnChart = anychart.column();
    columnChart.title('Swag level');
    // columnChart.yAxis().title('Turnout');
    columnChart.column(swag_level.mapAs({
        value: [1],
        x: [0]
    })).name('%');
    setupChartAxisTitles(columnChart, null, 'Turnout');
    setupChartSettings(columnChart);
    setContextMenu(columnChart);

    var lineChart = anychart.line();
    lineChart.title('Swag level');
    lineChart.line(swag_level.mapAs({
        value: [1],
        x: [0]
    })).tooltip().format(function() {
        return this.value + '%'
    });
   ...