Charts customization tutorial - creating a dark theme, gradient chart

In this tutorial, you will learn how to create a customize a beautiful line chart with a purple gradient in dark-theme style.

SEE THE FINAL RESULT

Requirements

To follow this tutorial you need a basic knowledge of HTML, CSS, JavaScript and MDBootstrap .

If you don't know these technologies or you would like to repeat the knowledge about them, I recommend you to read our previous tutorials first.

They are short, simple and free.

START HTML TUTORIAL START CSS TUTORIAL START JAVASCRIPT TUTORIALSTART MDBOOTSTRAP TUTORIAL

Step 1 - download MDB jQuery Free package

If you haven't done it yet - go to the getting started page and download MDB jQuery Free package.

MDB DOWNLOAD

If you use MDB Pro package is also fine. This tutorial works for both versions.

Step 2 - prepare a basic HTML structure HTML structure

After you downloaded and unzipped the MDB package, remove the existing content within the body tag and replace it with the following code:

  <!-- Grid container -->
  <div class="container">

    <!--Grid row-->
    <div class="row d-flex justify-content-center">

      <!--Grid column-->
      <div class="col-md-6">

      </div>
      <!--Grid column-->

    </div>
    <!--Grid row-->

  </div>
  <!-- Grid container -->

This is just a basic grid structure which centers the content and provides responsiveness for the elements we'll place inside.

Step 3 - add canvas element

Inside the column add canvas element. Later we'll get it later via ID and JavaScript.

<!--Grid column-->
<div class="col-md-6">

  <canvas id="lineChart"></canvas>

</div>
<!--Grid column-->

Step 4 - creating the chart instance

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. 

Below the mdb.js script, add the following code:

var ctxL = document.getElementById("lineChart").getContext('2d');

Once you have the element or context, you're ready to instantiate a pre-defined chart-type.

Add the following code below the declared variable:

    var myLineChart = new Chart(ctxL, {
      type: 'line',
      data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
          {
            label: "My First dataset",
            data: [0, 65, 45, 65, 35, 65, 0],
            backgroundColor: '#AD35BA',
            borderColor: [
              '#AD35BA',
            ],
            borderWidth: 2,
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(173, 53, 186, 0.1)",
          }
        ]
      },
      options: {
        responsive: true
      }
    });

Let me now explain this code step by step.

Chart types

The first property type let us define the type of chart.

There are 10 basic chart types. You can learn more about them in our Charts Documentation.

In this case, we want to create a line chart, so we set a value 'line'.

Chart labels

Labels are data that appears on the x-axis of the chart. In this case, we use the names of the months because we want to visualize the periodical change through the first 7 months of the year.

We declare our labels as elements of an array.

Datasets

Label inside the dataset arrays is just a name of the legend which explains to the user what actually the given dataset is.

Below the label, we declare the data itself. They must be numbers.

Below the data, we can define the appearance of the chart. We can set the colors, border width and many more.

Options

There are a lot of options available for the charts. In this case, we use only one - responsiveness. 

By setting responsive: true we can expect that the chart adjusts to the width of its parent element. So if we place the chart inside the bootstrap grid (which adjusts to the width of the screen) our chart will look good on every device (desktops, tablets, and mobile).

Step 5 - customizing the chart

Now let’s make this chart more interesting by adding a gradient.

To do this, we have to create a new variable that will store the gradient color.

Below this line of code:

var ctxL = document.getElementById("lineChart").getContext('2d');

Add this:

    var gradientFill = ctxL.createLinearGradient(0, 0, 0, 290);
    gradientFill.addColorStop(0, "rgba(173, 53, 186, 1)");
    gradientFill.addColorStop(1, "rgba(173, 53, 186, 0.1)");<font face="Roboto, sans-serif"><span style="font-size: 16px; white-space: normal;">
</span></font>

The createLinearGradient(x0, y0, x1, y1) method creates a linear gradient object. It has four arguments: (x0,y0) is the start point and (x1,y1) is the end point of the gradient.

The addColorStop() method adds the colors and their position (0–1) in the gradient object.

Now we just have to change the value of backgroundColor property (inside dataset array) to gradientFill variable.

backgroundColor: gradientFill,

If you want you can also change the background of the body. This chart will definitely look better on the dark background.

body {
      background-color: #181C30;
    }

That's it, your chart is ready.

There are plenty of other customization options. I'll cover them in the next tutorials.

The final code

See in MDB Editor:

SEE THE FINAL RESULT

or just:

var ctxL = document.getElementById("lineChart").getContext('2d');

    var gradientFill = ctxL.createLinearGradient(0, 0, 0, 290);

    gradientFill.addColorStop(0, "rgba(173, 53, 186, 1)");

    gradientFill.addColorStop(1, "rgba(173, 53, 186, 0.1)");

    var myLineChart = new Chart(ctxL, {

      type: 'line',

      data: {

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

        datasets: [

          {

            label: "My First dataset",

            data: [0, 65, 45, 65, 35, 65, 0],

            backgroundColor: gradientFill,

            borderColor: [

              '#AD35BA',

            ],

            borderWidth: 2,

            pointBorderColor: "#fff",

            pointBackgroundColor: "rgba(173, 53, 186, 0.1)",

          }

        ]

      },

      options: {

        responsive: true

      }

    });