JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<div class="graph-container">
    <div id="graph" class="graph-line-week ct-major-twelfth"></div>
</div>

JavaScript

var lineChartWeekOptions = {
			low: 0,
			high: 100,
			showArea: true,
			showPoint: true,
			fullWidth: true,
			chartPadding: {
				bottom: 20
			},
			axisY: {
				onlyInteger: true,
				scaleMinSpace: 10,
				type: Chartist.FixedScaleAxis,
				high: 80,
				ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
				low: 50
			},
			lineSmooth: Chartist.Interpolation.cardinal({
				fillHoles: true
			}),
		};
        
lineChartWeek.on('created', function (ctx) {
            var defs = ctx.svg.elem('defs');
            defs.elem('linearGradient', {
                id: 'gradient',
                x1: 0,
                y1: 1,
                x2: 0,
                y2: 0
            }).elem('stop', {
                offset: 0,
                'stop-color': 'hsla(55, 99%, 50%, 1)'
            }).parent().elem('stop', {
                offset: 1,
                'stop-color': 'hsla(43, 97%, 53%, 1)'
            });
        });

var lineChartWeekData = { labels: ["7","8","9","10","11","12","13","14","15","16","17"], series: [ [ { meta: "7", value: 72 },{ meta: "8", value: 59 },{ meta: "9", value: 62 },{ meta: "10", value: 62 },{ meta: "11", value: 61 },{ meta: "12", value: 60 },{ meta: "13", value: 60 },{ meta: "14", value: 62 },{ meta: "15", value: 61 },{ meta: "16", value: 57 },{ meta: "17", value: 60 } ] ] };



var lineChartWeek = new Chartist.Line('.graph-line-week', lineChartWeekData, lineChartWeekOptions);