Line Chart

Bar Chart With Data options

Bar Chart With Data options

Multiple Line Charts

Gradient Line Chart.

Gradient Stroke Line Chart.

Shadow Line Chart.

Pie Chart

Pie Chart

Documentation


You can pass plugin options using following data attributes. Please make sure to use valid json code.

Plugin Docs JSON Formatter
data-chart Type of chart for example: line , bar, spark
data-dataset Array or Arrays of Values
data-labels Array or Arrays of Labels
data-dataset-options Chart options data sets

Code Example




<div style="height: 450px">
   <canvas
      data-chart="line"
      data-dataset="[[0,528,228,728,528,1628,0]]"
      data-labels="['Blue','Yellow','Green','Purple','Orange','Red','Indigo']"
      data-dataset-options="[{ label:'Sales', borderColor:  'rgba(255,99,132,1)', backgroundColor: 'rgba(255, 99, 132, 0.2)'}]">
   </canvas>
</div>

Code Example




<div style="height: 300px">
   <canvas
      data-chart="pie"
      data-dataset="[
      [75, 50],
      [25, 50],
      ]"
      data-labels="[['Disk'],['Database']]"
      data-dataset-options="[
      {
      label: 'Disk',
      backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      ],
      },
      {
      label: 'Database',
      backgroundColor: [
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      ],
      },
      ]"
      >
   </canvas>
</div>

Spark Charts With Charts JS
Sodium
Spark Bar
Oxygen 67%
Iron
675
Carbon 67%
Iron
Carbon 67%
More Spark Charts With Charts JS
Bit Coin
$960
Bit Coin
$ 960
Bit Coin
$ 960
Bit Coin
$960