Charts Dashkit only Plugin

Create beautiful charts with a simple, but powerful and flexible JavaScript Chart.js plugin. Please read the official documentation for a full list of options.

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets. 

<div class="chart">
  <canvas class="chart-canvas" id="overviewChart"></canvas>
</div>

<script>
  new Chart('overviewChart', {
    type: 'line',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Earned',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
      }]
    }
  });
</script>

Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. 

<div class="chart">
  <canvas class="chart-canvas" id="feedChart"></canvas>
</div>

<script>
  new Chart('feedChart', {
    type: 'bar',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'Sales',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }]
    }
  });
</script>

Doughnut

Excellent at showing the relational proportions between data. 

<div class="chart chart-appended">
  <canvas class="chart-canvas" id="trafficChart" data-toggle="legend" data-target="#trafficChartLegend"></canvas>
</div>

<div class="chart-legend" id="trafficChartLegend"></div>

<script>
  new Chart('trafficChart', {
    type: 'doughnut',
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            afterLabel: function() {
              return '%'
            }
          }
        }
      }
    },
    data: {
      labels: ['Direct', 'Organic', 'Referral'],
      datasets: [{
        data: [60, 25, 15],
        backgroundColor: ['#2C7BE5', '#A6C5F7', '#D2DDEC']
      }]
    }
  });
</script>

Sparkline

A simple little line chart with disabled interactions. 

<div class="chart chart-sparkline">
  <canvas class="chart-canvas" id="sparklineChartSocialOne"></canvas>
</div>

<script>
  new Chart(chart, {
    type: 'line',
    options: {
      scales: {
        y: {
          display: false
        },
        x: {
          display: false
        }
      },
      elements: {
        line: {
          borderWidth: 2,
          borderColor: '#D2DDEC'
        },
        point: {
          hoverRadius: 0
        }
      },
      plugins: {
        tooltip: {
          external: function() {
            return false;
          }
        }
      }
    },
    data: {
      labels: new Array(12).fill('Label'),
      datasets: [{
        data: [0, 15, 10, 25, 30, 15, 40, 50, 80, 60, 55, 65]
      }]
    }
  });
</script>

Toggle chart data

Easily toggle hidden datasets with a simple interface based on the data attributes.

Options

Name Type Default Description
data-toggle string chart Activates the toggle functionality.
data-target string - The selector of a chart the new set of data will be applied to.
data-trigger string - How datasets are triggered. Should be a valid JavaScript event.
data-action string - Use toggle to replace an active dataset, or add to add a new one.
data-dataset number - The order of the dataset in the datasets array to toggle.

Conversions

Last year comparision: 
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="cardToggle" data-toggle="chart" data-target="#conversionsChart" data-trigger="change" data-action="add" data-dataset="1">
  <label class="form-check-label" for="cardToggle"></label>
</div>

<div class="chart">
  <canvas id="conversionsChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('conversionsChart', {
    type: 'bar',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return value + '%';
            }
          }
        }
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12'],
      datasets: [{
        label: '2020',
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }, {
        label: '2019',
        data: [15, 10, 20, 12, 7, 0, 8, 16, 18, 16, 10, 22],
        backgroundColor: '#d2ddec',
        hidden: true
      }]
    }
  });
</script>

Sales 

<ul class="nav nav-tabs nav-tabs-sm card-header-tabs">
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="0">
    <a class="nav-link active" href="#" data-bs-toggle="tab">
      All
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="1">
    <a class="nav-link" href="#" data-bs-toggle="tab">
      Direct
    </a>
  </li>
  <li class="nav-item" data-toggle="chart" data-target="#salesChart" data-trigger="click" data-action="toggle" data-dataset="2">
    <a class="nav-link" href="#" data-bs-toggle="tab">
      Organic
    </a>
  </li>
</ul>

<div class="chart">
  <canvas id="salesChart" class="chart-canvas"></canvas>
</div>

<script>
  new Chart('salesChart', {
    type: 'line',
    options: {
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '$' + value + 'k';
            }
          }
        }
      }
    },
    data: {
      labels: ['Oct 1', 'Oct 3', 'Oct 6', 'Oct 9', 'Oct 12', 'Oct 5', 'Oct 18', 'Oct 21', 'Oct 24', 'Oct 27', 'Oct 30'],
      datasets: [{
        label: 'All',
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25]
      }, {
        label: 'Direct',
        data: [7, 40, 12, 27, 34, 17, 19, 30, 28, 32, 24],
        hidden: true
      }, {
        label: 'Organic',
        data: [2, 12, 35, 25, 36, 25, 34, 16, 4, 14, 15],
        hidden: true
      }]
    }
  });
</script>

Please refer to src/js/user.js for more examples.