JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="par-3" class="chart"></div>
<div id="par-4" class="chart"></div>
<div id="par-5" class="chart"></div>

CSS

.chart {
    height: 80px;
    width: 100%;
}

JavaScript

google.charts.load('current', {
    packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLogScales);

function drawLogScales() {
    var data1 = google.visualization.arrayToDataTable([
        ['Score', 'Par 3', {
            'type': 'string',
            'role': 'style'
        }],
        ['103', 0, 'point { fill-color: transparent }'],
        ['133', 0, 'point { size: 6; fill-color: #2c59b5; }'],
        ['166', 0, 'point { fill-color: transparent; }']
    ]);
    var data2 = google.visualization.arrayToDataTable([
        ['Score', 'Par 4', {
            'type': 'string',
            'role': 'style'
        }],
        ['202', 0, 'point { fill-color: transparent }'],
        ['344', 0, 'point { size: 6; fill-color: #2c59b5; }'],
        ['420', 0, 'point { fill-color: transparent; }']
    ]);
    var data3 = google.visualization.arrayToDataTable([
        ['Score', 'Par 5', {
            'type': 'string',
            'role': 'style'
        }],
        ['307', 0, 'point { fill-color: transparent }'],
        ['466', 0, 'point { size: 6; fill-color: #2c59b5; }'],
        ['502', 0, 'point { fill-color: transparent; }']
    ]);

    var options = {
        lineWidth: 10,
        pointShape: 'line',
        pointSize: 0,
        pointsVisible: true,
        colors: ['#3d7be3'],
        chartArea: {
            left: 0,
            top: 0,
            width: '100%'
        },
        hAxis: {
            logScale: false,
            textPosition: 'in',
            minValue: 50,
            maxValue: 300,
            //viewWindow: { min: 50, max: 300 }
        },
        vAxis: {
            logScale: false,
            gridlines: {
                count: 0
            }
        },
        legend: {
            position: 'none'
        }
    };

    var par3 = new google.visualization.LineChart(document.getElementById('par-3'));
    par3.draw(data1, options);
	/*
	options.hAxis.viewWindow.min = 200;
	options.hAxis.viewWindow.max =...