Charts - Documentation - tabler.github.io - a responsive, flat and full featured admin template

Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Charts

### c3.js charts

### Chart name

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Chart name</h3>
      </div>
      <div class="card-body">
        <div id="chart-wrapper" style="height: 16rem"></div>
      </div>
    </div>
    <script>
    require(['c3', 'jquery'], function(c3, $) {
      $(document).ready(function(){
        var chart = c3.generate({
          bindto: '#chart-wrapper', // id of chart wrapper
          data: {
            columns: [
                // each columns data
              ['data1', 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
              ['data2', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            ],
            labels: true,
            type: 'line', // default type of chart
            colors: {
              'data1': tabler.colors["blue"],
              'data2': tabler.colors["green"]
            },
            names: {
                // name of each serie
              'data1': 'Tokyo',
              'data2': 'London'
            }
          },
          axis: {
            x: {
              type: 'category',
              // name of each category
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
            },
          },
          legend: {
                    show: false, //hide legend
          },
          padding: {
            bottom: 0,
            top: 0
          },
        });
      });
    });
    </script>