Representaciones gráficas y adaptables a tu web con Chartist..

Chartist es una librería sencilla y simple que he encontrado por ahí , si de crear gráficos se trata hay que darle la oprtunidad a esta librería .

Existen librerías buenas que podríamos mencionar pero vamos a enfocarnos en esta , su configuración es fácil…

Si estás apurado podrás usar un CDN para cargar chartist.js desde un servidor externo.

Flexible y responsive así esta gráfica que además genera los gráficos en SVG , creada y personalizable en SASS , bastante sencilla de configurar en tu web.

Usando un CDN dentro del head html ….

<head>
    <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>
  </head>

Mostrando el gráfico…

<div class="ct-chart ct-perfect-fourth"></div>

Creando el gráfico con dimensiones fijas codigo 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: [
    [5, 2, 4, 2, 0]
  ]
};

Para obtener más información y una guía avanzada de como utilizar consulta esta guía Iniciando con Chartist.

 

Relacionado