​

// Bar chart with custom options

var bar_ctx = document.getElementById('bar-chart-custom-options').getContext('2d');

​

var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 0, 600);

purple_orange_gradient.addColorStop(0, 'orange');

purple_orange_gradient.addColorStop(1, 'purple');

​

const dataBarCustomOptions = {

  type: 'bar',

  data: {

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

    datasets: [

      {

        label: 'Traffic',

        data: [30, 15, 62, 65, 61, 6],

        backgroundColor: purple_orange_gradient,

        borderColor: [

          'rgba(255,99,132,1)',

          'rgba(54, 162, 235, 1)',

          'rgba(255, 206, 86, 1)',

          'rgba(75, 192, 192, 1)',

          'rgba(153, 102, 255, 1)',

          'rgba(255, 159, 64, 1)',

        ],

        borderWidth: 1,

      },

    ],

  },

};

​

const optionsBarCustomOptions = {

  options: {

    legend: {

      position: 'top',

      labels: {

        fontColor: 'green'

      }

    },

    scales: {

      xAxes: [

        {

          ticks: {

            fontColor: '#4285F4',

          },

        },

      ],

      yAxes: [

        {

          ticks: {

            fontColor: '#f44242',

          },

        },

      ],

    },

  },

};

​

new mdb.Chart(

  document.getElementById('bar-chart-custom-options'),

  dataBarCustomOptions,

  optionsBarCustomOptions

);