Responsive Charts with Chartist.js

In this example below you will see how to do a Responsive Charts with Chartist.js with some HTML / CSS and Javascript

Do you like Chartist.js? Contribute! https://github.com/gionkunz/chartist-js

Thumbnail
This awesome code was written by gionkunz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gionkunz ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive Charts with Chartist.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85781/chartist-0.0.2.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Build awesome responsive charts with Chartist.js</h1>
<p class="tagline">Resize your browser to see responsive behavior!</p>
<div class="container">
  <div id="chartist-chart" class="ct-chart"></div>
</div>
<a class="button" href="https://github.com/gionkunz/chartist-js" target="_blank">Contribute to Chartist.js</a>
<p>We need contribution in order to make Chartist.js more awesome and reliable!</p>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.1.0/snap.svg-min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/85781/chartist-0.0.2.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gionkunz/responsive-charts-with-chartistjs-zHBtn */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);
@-webkit-keyframes dashoffset {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@-moz-keyframes dashoffset {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@-ms-keyframes dashoffset {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@keyframes dashoffset {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -20px;
  }
}
@-webkit-keyframes pulse {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -1000px;
  }
}
@-moz-keyframes pulse {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -1000px;
  }
}
@-ms-keyframes pulse {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -1000px;
  }
}
@keyframes pulse {
  0% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: -1000px;
  }
}
@-webkit-keyframes bouncing-stroke {
  0% {
    stroke-width: 10px;
  }
  50% {
    stroke-width: 15px;
  }
  100% {
    stroke-width: 10px;
  }
}
@-moz-keyframes bouncing-stroke {
  0% {
    stroke-width: 10px;
  }
  50% {
    stroke-width: 15px;
  }
  100% {
    stroke-width: 10px;
  }
}
@-ms-keyframes bouncing-stroke {
  0% {
    stroke-width: 10px;
  }
  50% {
    stroke-width: 15px;
  }
  100% {
    stroke-width: 10px;
  }
}
@keyframes bouncing-stroke {
  0% {
    stroke-width: 10px;
  }
  50% {
    stroke-width: 15px;
  }
  100% {
    stroke-width: 10px;
  }
}
@-webkit-keyframes exploding-stroke {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }
  100% {
    stroke-width: 40px;
    opacity: 0;
  }
}
@-moz-keyframes exploding-stroke {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }
  100% {
    stroke-width: 40px;
    opacity: 0;
  }
}
@-ms-keyframes exploding-stroke {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }
  100% {
    stroke-width: 40px;
    opacity: 0;
  }
}
@keyframes exploding-stroke {
  0% {
    stroke-width: 2px;
    opacity: 1;
  }
  100% {
    stroke-width: 40px;
    opacity: 0;
  }
}
@-webkit-keyframes teeter {
  0% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
  25% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  50% {
    -moz-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
  }
  75% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  100% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
}
@-moz-keyframes teeter {
  0% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
  25% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  50% {
    -moz-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
  }
  75% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  100% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
}
@-ms-keyframes teeter {
  0% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
  25% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  50% {
    -moz-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
  }
  75% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  100% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
}
@keyframes teeter {
  0% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
  25% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  50% {
    -moz-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(3deg) rotateY(4deg) rotateZ(0deg);
  }
  75% {
    -moz-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(1deg) rotateY(2deg) rotateZ(0deg);
  }
  100% {
    -moz-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -ms-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    -webkit-transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
    transform: perspective(500px) rotateX(-1deg) rotateY(-4deg) rotateZ(0deg);
  }
}
a {
  color: #d70206;
  text-decoration: none;
}

.button {
  display: inline-block;
  margin-top: 2em;
  color: white;
  padding: 1em;
  background-color: #d70206;
  font-size: 1em;
  font-weight: 400;
  text-transform: uppercase;
}

html, body {
  position: absolute;
  width: 100%;
  height: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  background-color: #67686E;
  color: #292a2c;
  text-align: center;
}

h1 {
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1;
}

.tagline {
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

p {
  font-weight: 400;
  text-transform: uppercase;
}

.container {
  max-width: 640px;
  margin: 2em auto;
  background-color: #626369;
  -moz-box-shadow: 10px 10px #5d5e63;
  -webkit-box-shadow: 10px 10px #5d5e63;
  box-shadow: 10px 10px #5d5e63;
  -webkit-animation: teeter 10s linear infinite;
  /* Safari 4+ */
  -moz-animation: teeter 10s linear infinite;
  /* Fx 5+ */
  -o-animation: teeter 10s linear infinite;
  /* Opera 12+ */
  animation: teeter 10s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-series.ct-series-a .ct-line {
  stroke-dasharray: 5px;
  -webkit-animation: dashoffset 1s linear infinite;
  /* Safari 4+ */
  -moz-animation: dashoffset 1s linear infinite;
  /* Fx 5+ */
  -o-animation: dashoffset 1s linear infinite;
  /* Opera 12+ */
  animation: dashoffset 1s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-series.ct-series-a .ct-point {
  -webkit-animation: bouncing-stroke 0.6s linear infinite;
  /* Safari 4+ */
  -moz-animation: bouncing-stroke 0.6s linear infinite;
  /* Fx 5+ */
  -o-animation: bouncing-stroke 0.6s linear infinite;
  /* Opera 12+ */
  animation: bouncing-stroke 0.6s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-series.ct-series-b .ct-line {
  stroke-width: 10px;
  stroke-dasharray: 15px 5px;
  -webkit-animation: dashoffset 2s linear infinite;
  /* Safari 4+ */
  -moz-animation: dashoffset 2s linear infinite;
  /* Fx 5+ */
  -o-animation: dashoffset 2s linear infinite;
  /* Opera 12+ */
  animation: dashoffset 2s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-series.ct-series-b .ct-point {
  -webkit-animation: exploding-stroke 1.8s linear infinite;
  /* Safari 4+ */
  -moz-animation: exploding-stroke 1.8s linear infinite;
  /* Fx 5+ */
  -o-animation: exploding-stroke 1.8s linear infinite;
  /* Opera 12+ */
  animation: exploding-stroke 1.8s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-series.ct-series-c .ct-line {
  stroke-width: 2px;
  stroke-dasharray: 20px 180px;
  -webkit-animation: pulse 2s linear infinite;
  /* Safari 4+ */
  -moz-animation: pulse 2s linear infinite;
  /* Fx 5+ */
  -o-animation: pulse 2s linear infinite;
  /* Opera 12+ */
  animation: pulse 2s linear infinite;
  /* IE 10+ */
}
.container > .ct-chart .ct-grid {
  stroke: rgba(0, 0, 0, 0.1);
}


/*Downloaded from https://www.codeseek.co/gionkunz/responsive-charts-with-chartistjs-zHBtn */
var data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  series: [
    {
      data: [1, 2, 3, 5, 8, 13]
    },
    {
      data: [0, 3, 5, 4, 3, 11]
    },
    {
      data: [3, 5, 9, 7, 4, 2]
    }
  ]
};

var options = {
  chartPadding: 5,
  axisX: {
    offset: 10,
    labelInterpolationFnc: function(value) {
      return 'Week ' + value;
    }
  },
  axisY: {
    offset: 10
  }
};

var responsiveOptions = [
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    showPoint: false,
    lineSmooth: false
  }],
  ['screen and (max-width: 640px)', {
    showLine: false,
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'W' + value;
      }
    }
  }]
];

var chart = Chartist('#chartist-chart', data, options, responsiveOptions);

$(window).on('resize', function() {
  chart.update();
});

Comments