Katniss Responsive Bootstrap 4 Admin Template

ChartJS Charts

Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Multiple Color Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Javascript Code

var ctx = document.getElementById('chartBar1').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  datasets: [{
    label: '# of Votes',
    data: [12, 39, 20, 10, 25, 18],
    backgroundColor: '#27AAC8'
  }]
},
options: {
  legend: {
    display: false,
      labels: {
        display: false
      }
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero:true,
        fontSize: 10,
        max: 80
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero:true,
        fontSize: 11
      }
    }]
  }
}
});

Multiple Color Code

backgroundColor: [
  '#29B0D0',
  '#2A516E',
  '#F07124',
  '#CBE0E3',
  '#979193'
]

Horizontal Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Horizontal Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Horizontal Type Code

type: 'horizontalBar'

Stacked Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Stacked Bar Chart

A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.

Source Code

scales: {
  yAxes: [{
    stacked: true
  }],
  xAxes: [{
    stacked: true
  }]
}

Line Chart

A line graph is a type of chart which displays information as a series of data points connected by straight line segments.

Line Chart

A line graph is a type of chart which displays information as a series of data points connected by straight line segments.

Source Code

type: 'line'

Area Chart

An area chart or area graph displays graphically quantitative data. It is based on the line chart.

Area Chart

An area chart or area graph displays graphically quantitative data. It is based on the line chart.

Source Code

datasets: [{
  data: [12, 39, 20, 10, 25, 18],
  fill: true,
}]

Pie Chart

A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

Source Code

var pie = document.getElementById('chartDonut');
  var myPieChart = new Chart(pie, {
  type: 'pie',
  data: data,
  options: option
});

Donut Chart

A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

Source Code

var pie = document.getElementById('chartDonut');
  var myPieChart = new Chart(pie, {
  type: 'doughnut',
  data: data,
  options: option
});