chartjs-plugin-style

Chart.js plugin for more styling options.

• Include scripts

  First, we need to include Chart.js and chartjs-plugin-style.js in our page.

  <script type="text/javascript" src="Chart.js"></script>

  <script type="text/javascript" src="chartjs-plugin-style.js"></script>

• Create a canvas

  We need to have a canvas in our page.

  <canvas id="myChart"></canvas>

• Create a chart

  Now, we can create a chart. We add a script to our page.
  Use the default settings for now. These can be tweaked later.

  var ctx = document.getElementById('myChart').getContext('2d');

  var chart = new Chart(ctx, {

    type: 'bar',

    data: {

      labels: ['January', 'February', 'March', 'April', 'May', 'June'],

      datasets: [{

        data: [45, 20, 64, 32, 76, 51],

        backgroundColor: 'rgb(255, 99, 132)'

      }]

    }

  });

• Add shadows

  You can add shadows to the dataset and the tooltip.

    data: {

      ...

      datasets: [{

        ...

        shadowOffsetX: 5,

        shadowOffsetY: 5,

        shadowBlur: 20,

        shadowColor: 'rgba(0, 0, 0, 0.5)',

        hoverShadowOffsetX: 5,

        hoverShadowOffsetY: 5,

        hoverShadowBlur: 40,

        hoverShadowColor: 'rgba(0, 0, 0, 1)'

      }]

    },

    options: {

      tooplips: {

        shadowOffsetX: 5,

        shadowOffsetY: 5,

        shadowBlur: 10,

        shadowColor: 'rgba(0, 0, 0, 0.5)'

      }

    }

  });

• See a few other examples

  Line Chart

  Bubble Chart

  Doughnut Chart

  Radar Chart

• ...and you're done!

  See also GitHub repository