DashByte - Premium Dashboard Template

Charts And Graphs

Chart JS

Simple yet flexible JavaScript charting for designers & developers. Read the Official Chartjs Documentation for new updates, instructions and other options.

Bar Chart

Below is a basic bar chart implementation that you can use.

var ctxLabel = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var ctxData1 = [20, 60, 50, 45, 50, 60, 70, 40, 45, 35, 25, 30];
var ctxData2 = [10, 40, 30, 40, 60, 55, 45, 35, 30, 20, 15, 20];
var ctxColor1 = '#506fd9';
var ctxColor2 = '#DBDFFD';

// Bar chart
var ctx1 = document.getElementById('chartBar1').getContext('2d');
new Chart(ctx1, {
  type: 'bar',
  data: {
    labels: ctxLabel,
    datasets: [{
      data: ctxData1,
      backgroundColor: ctxColor1,
      barPercentage: 0.5
    }, {
      data: ctxData2,
      backgroundColor: ctxColor2,
      barPercentage: 0.5
    }]
  },
  options: {
    maintainAspectRatio: false,
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      y: {
        beginAtZero:true,
        max: 80
      }
    }
  }
});

Horizontal Chart

Below is the horizontal bar chart example.

options: {
  indexAxis: 'y'
}

Stacked Chart

Below is the stacked bar chart example.

scales: {
  y: {
    stacked: true
  },
  x: {
    stacked: true
  }
}

Line Chart

Below is the line chart example.

type: 'line'

Area Chart

Below is the area chart example.

datasets: [{
  fill: true
}]

With Transparency

Below is the bar chart example with transparency bar color.

datasets: [{
  backgroundColor: 'rgba(80,111,217, .5)'
}

With Gradient

Below is the bar chart example with gradient effect of the bar.

var gradient = ctx7.createLinearGradient(0, 350, 0, 0);
gradient.addColorStop(0, '#506fd9');
gradient.addColorStop(1, '#ba50d9');

var gradient2 = ctx7.createLinearGradient(0, 400, 0, 0);
gradient2.addColorStop(0, '#dbdffd');
gradient2.addColorStop(1, '#fddbdf');

datasets: [{
  backgroundColor: gradient
}]

Pie & Donut Chart

Below are an example of data in a pie and donut chart.

// For a doughnut chart
var ctx8 = document.getElementById('chartPie');
var myPieChart = new Chart(ctx8, {
  type: 'doughnut',
  data: datapie,
  options: optionpie
});

// For a pie chart
var ctx9 = document.getElementById('chartDonut');
var myDonutChart = new Chart(ctx9, {
  type: 'pie',
  data: datapie,
  options: optionpie
});

Shaira Diaz