JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<div class="ct-chart ct-golden-section"></div>

CSS

.ct-series-a .ct-line{
  stroke: url(#gradient) !important;
  stroke-width: 2;
  stroke-linecap: round;
}

JavaScript

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [3, 2, 3, 2, 5,2,3,4,5,0,1,2,3,4]
  ]
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object.
var chart = new Chartist.Line('.ct-chart', data, {axisX: {
  	// If labels should be shown or not
    showLabel: false,
    // If the axis grid should be drawn or not
    showGrid: false
 	},
  height: 70,
  width: 250,
  showPoint: false,
  axisY: {
  	// If labels should be shown or not
    showLabel: false,
    // If the axis grid should be drawn or not
    showGrid: false
 	},
  lineSmooth: Chartist.Interpolation.cardinal({
    tension: 1
  })
  });

// Offset x1 a tiny amount so that the straight stroke gets a bounding box
// Straight lines don't get a bounding box 
// Last remark on -> http://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBox
chart.on('draw', function(ctx) {  
  if(ctx.type === 'area') {    
    ctx.element.attr({
      x1: ctx.x1 + 0.001
    });
  }
});

// Create the gradient definition on created event (always after chart re-render)
chart.on('created', function(ctx) {
  var defs = ctx.svg.elem('defs');
  defs.elem('linearGradient', {
    id: 'gradient',
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 1
  }).elem('stop', {
    offset: 0.3,
    'stop-color': '#0DB942'
  }).parent().elem('stop', {
    offset: 1,
    'stop-color': '#FF9F1E'
  });
});