Chartist Line chart with gradient

chartist-line-chart-with-gradient.markdown

Chartist Line chart with gradient

A Pen by Kiran on CodePen.

License.

index.html

<svg viewbox="0 0 0 0" style="height:0; width: 0;">
  <defs>
    <linearGradient id="gradient-a" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#20F381" />
      <stop offset="100%" stop-color="transparent" />
    </linearGradient>
  </defs>
</svg>

<div id="line-container" class='gradient-line-chart'>
    <div id="line-chart"></div>
</div>

script.js

new Chartist.Line('#line-chart', {
  labels: [1,2,3,4,5,6,7,8,9,10,11,12,13],
  series: [
    Array.from({length: 13}, () => Math.floor(Math.random() * 13)),
  ]
}, {
  fullWidth: true,
  showArea: true,
  low: 0,
  showPoint: false,
  axisX: {
    showGrid: true
  },
  axisY: {
    showGrid: true
  },
  chartPadding: {
    right: 40
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Barlow');

.gradient-line-chart {
    background-color: #1B1B24;
    font-family: Barlow;
}

#line-chart {
  width: 100%;
  height: 200px;
}

.gradient-line-chart .ct-series-a .ct-line{
  stroke: #20F381;
  stroke-width: 2px;
}

.gradient-line-chart .ct-series-a .ct-area, .ct-series-a .ct-slice-pie {
    fill: url(#gradient-a);
    fill-opacity: 0.4;
}

.gradient-line-chart .ct-label{
  color: #FFFFFF;
  opacity: 0.3;
}

.gradient-line-chart .ct-grids .ct-horizontal:first-child,
.gradient-line-chart .ct-grids .ct-horizontal + .ct-vertical{
    stroke: #3A3A41;
    stroke-dasharray: 0;
    display: block;
}

.gradient-line-chart .ct-grids .ct-horizontal,
.gradient-line-chart .ct-grids .ct-vertical{
    display: none
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />