Charts JS

Responsive wrapper

ChartJS native code bugs on devices with narrow screens. We developed a solution to fix this.

Use this component to be sure your ChartJS fits the screen of user's device.

Equivalent of an XS screen (320px) and a wrapper with size-4

Depending on the chart you are displaying, it will need different heights on mobile.

Size-1

Use this modifier to have a very short chart on devices.

<div class="chart-container chart-container--size-1">
  <canvas id="your-chart-id"></canvas>
</div>

Size-2

Use this modifier to have a medium-short chart on devices.

<div class="chart-container chart-container--size-2">
  <canvas id="your-chart-id"></canvas>
</div>

Size-3

Use this modifier to have a medium-tall chart on devices.

<div class="chart-container chart-container--size-3">
  <canvas id="your-chart-id"></canvas>
</div>

Size-4

Use this modifier to have a tall chart on devices.

<div class="chart-container chart-container--size-4">
  <canvas id="your-chart-id"></canvas>
</div>

Samples

Depending on the kind of information you want to display, one chart type can be better than others. Go check directly the CodePen collection of charts we prepared, otherwise here is the list of charts you can use on your articles:

• Bar
• Line
• Multiline
• Vertical bar
• Vertical multibar
• Vertical multibar 2
• Vertical multibar 3
• Vertical multibar 4
• Horizontal multibar
• Pie
• Multipie
• Doughnut

Bar

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Line

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Multiline

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Vertical bar

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Vertical multibar

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Vertical multibar 2

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Vertical multibar 3

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Vertical multibar 4

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Horizontal multibar

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Pie

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Multipie

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Doughnut

Open this chart in a CodePen to edit it and then copy/paste it in your article.

Options

Chart type

The first choice is the type of chart you want. There are many options, but here are the most common ones (the ones we used on this page): line, bar, horizontalBar, pie, doughnut. This option has to be setup at the beginning of the JavaScript code:

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {...},
      options: {...}
</script>

Data

Data has to be declared in the section data of the JavaScript code.

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"],
        datasets: [{
          label: "Annee 2018",
          backgroundColor: ['rgba(20, 96, 170,.5)', 'rgba(217, 127, 24,.5)', 'rgba(18, 133, 166,.5)', 'rgba(245,121,34,.5)', 'rgba(220, 9, 9,.5)'],
          data: [89, 55, 78, 36, 14],
        }]
      },
      options: {...}
</script>

Data (II)

It's quite common to need more than one dataset (ex. Chart type line, multibar, multipie...).

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"],
        datasets: [{
          label: "Année 2018",
          backgroundColor: ['rgba(20, 96, 170,.5)', 'rgba(217, 127, 24,.5)', 'rgba(18, 133, 166,.5)', 'rgba(245,121,34,.5)', 'rgba(220, 9, 9,.5)'],
          data: [89, 55, 78, 36, 14],
          },{
          label: "Année 2019",
          backgroundColor: ['rgba(20, 96, 170,.2)', 'rgba(217, 127, 24,.2)', 'rgba(18, 133, 166,.2)', 'rgba(245,121,34,.2)', 'rgba(220, 9, 9,.2)'],
          data: [11, 78, 65, 36, 56],
          }
        ]
      },
      options: {...}
</script>

Colors

Colors are also customizable in the data > dataset > backgroundColor section.

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"],
        datasets: [{
          label: "Année 2018",
          backgroundColor: ['rgba(20, 96, 170,.5)', 'rgba(217, 127, 24,.5)', 'rgba(18, 133, 166,.5)', 'rgba(245,121,34,.5)', 'rgba(220, 9, 9,.5)'],
          data: [89, 55, 78, 36, 14],
          }
        ]
      },
      options: {...}
</script>

Selectra colors

Colors (II)

If you want to use multiple colors, it depends on the type of the chart you are using:

• Lines, Bars, Multipies: multiple datasets, one color for each:
1. JS

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        datasets: [{
          label: "Année 2018",
          backgroundColor: 'rgba(20, 96, 170,1)', 
          data: [801, 892, 874, 862, 874, 907, 932, 929, 924, 953, 1031, 987],
          }, {
          label: "Année 2019",
          backgroundColor: 'rgba(217, 127, 24,1)', 
          data: [881, 882, 884, 882, 884, 987, 982, 989, 984, 983, 1081, 987],
          }, {
          label: "Année 2020",
          backgroundColor: 'rgba(220, 9, 9,1)', 
          data: [481, 482, 484, 482, 484, 487, 482, 489, 484, 483, 481, 487],
          },
        ]
      },
      options: {...}
</script>

• Pie, Doughnut: one color for each data:
1. JS

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: [
          "Pommes",
          "Poires",
          "Bananes",
          "Kiwis",
          "Dragonfruits"
        ],
        datasets: [{
          label: "Année 2018",
          backgroundColor: [
            'rgba(20, 96, 170,.5)', 
            'rgba(217, 127, 24,.5)', 
            'rgba(18, 133, 166,.5)', 
            'rgba(245,121,34,.5)', 
            'rgba(220, 9, 9,.5)', 
          ],
          data: [
            89,
            55,
            78,
            36,
            14
          ],
        }]
      },
      options: {...}
</script>

Axes

You can choose whether hiding or showing the axes ("xAxes", "yAxes") of the chart, and the grid ("gridLine") as well. By default they are displayed (ex. Chart type Line; Chart type Horizontal Bar) but they can be hidden (ex. Chart type Pie)

<script>
  window.addEventListener( 'load', function () {
    var ctx = document.getElementById('chart-id').getContext('2d');
    var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {...},
      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Chart type: Pie Multiple'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true,
        },
        scales: {
          xAxes: [{
            display: false, 
            gridLines: {
              display:false
            }, 
          }],
          yAxes: [{
            display: false, 
            gridLines: {
              display:false
            }, 
          }]
        }
      },
</script>

Implementation on an article

Here is an easy-to-follow list once your chart is finished on the code pen.

1. Call

Paste the call to the Chart.min.js file. You can paste it anywhere you want, though we recommend to put it at the end of the article.

Just make sure the call is only one time on the page to avoid loading the file twice and making the page heavier. Even if you have many charts, you only need to call the file once.

<script src="/themes/custom/agrippa/js/lib/Chart.min.js"></script>

This same code will work for any of your Drupal sites. The <script> tag is empty, it's normal.

2. Markup

Make sure the id matches with the one you setup on the JavaScript code (step 3 just below). It's even better if the id corresponds to the content of your chart, for example prixFioul2018 or frenchProvidersMarketRepartition.

Place the chart where you want in your article, adding the code below:

<div class="chart-container chart-container--size-2">
  <canvas id="uniqueIdForEachChart"></canvas>
</div>

3. Javascript

Place the JavaScript code. You can also place it wherever you want, though it's simpler to paste it right after the markup code (described in step 2).

Make sure the id matches with the one you setup on the markup code just before.

<script>
  window.addEventListener('load', function () {
    var ctx = document.getElementById('uniqueIdForEachChart').getContext('2d');
    var chart = new Chart(ctx, {

      type: 'pie',
      data: {
        labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"],
        datasets: [{
          label: "Annee 2018",
          backgroundColor: ['rgba(18,166,208,.5)', 'rgba(245,164,34,.5)', 'rgba(136,210,231,.5)', 'rgba(245,121,34,.5)', 'rgba(245,34,34,.5)'],
          data: [89, 55, 78, 36, 14],
        }, {
          label: "Annee 2019",
          backgroundColor: ['rgba(18,166,208,.2)', 'rgba(245,164,34,.2)', 'rgba(136,210,231,.2)', 'rgba(245,121,34,.2)', 'rgba(245,34,34,.2)'],
          data: [11, 78, 65, 36, 56],
        }]
      },

      options: {
        responsive: true,
        title: {
          display: true,
          text: 'Chart type: Pie Multiple'
        },
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        hover: {
          mode: 'nearest',
          intersect: true,
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: false
            },
            display: false,
          }],
          yAxes: [{
            gridLines: {
              display: false
            },
            display: false,
          }]
        }
      }
    });
    var mediaQuery = window.matchMedia('(min-width: 768px)');

    function toggleAspectRatio(mq) {
      chart.options.maintainAspectRatio = mq.matches;
      chart.resize();
    }

    toggleAspectRatio(mediaQuery);

    mediaQuery.addListener(toggleAspectRatio);
  })
</script>

Frequent Asked Questions

Start at 0

How can I set the axes origin starting at zero?

In the options, look for the concerned axe (or both if it's what you want). Add ticks: {beginAtZero: true},.

options: {
  scales: {
    xAxes: [{
      ticks: {beginAtZero: true},
    }],
    yAxes: [{
      ticks: {beginAtZero: true},
    }]
  }
},

Data in percentage

How can I set data in percentage?

In the JavaScript code, look for the options > tooltips section. Add the code in the example below:

options: {
  tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      label: function(tooltipItems, data) { return tooltipItems.yLabel + '%'; }
    }
  },
}

Max value for an axis

How can I setup a max value for an axis?

In the options section, look for the concerned axis (or both). Add ticks: {suggestedMax: 100}, where 100 is the max value. You can replace it by the value you want.

options: {
  scales: {
    xAxes: [{
      ticks: {
        beginAtZero: true,
        suggestedMax: 100,
      }
    }],
    yAxes: [{
      ticks: {
        beginAtZero: true,
        suggestedMax: 100,
      }
    }]
  }
},

Straight lines

How to avoid "rounded lines" (in chart type: line) and get them straight?

In the data section, look for the concerned dataset and add lineTension: 0,.

data: {
  datasets: [{
    label: "Année 2018",
    lineTension: 0,
  }]
},

Outline

How to remove the background color and keep only the outline?

In the data section, look for the concerned dataset and set the backgroundColor on transparent, which is backgroundColor: 'rgba(X, X, X, 0)'

data: {
  datasets: [{
    label: "Année 2018",
    backgroundColor:'rgba(18, 166, 208, 0)',
  }]
},

Axes title

How can I modify the axes title?

The title is setup in the options section. Look for the concerned axe (xAxes, yAxesor both). Set the labelString as you wish. Note that the scaleLabel has to be on true to see the change.

options: {
  scales: [{
    xAxes: [{
      scaleLabel: {
        display: true, 
        labelString: 'Eur/1000L'
      }
    }],
    yAxes: [{
      scaleLabel: {
        display: true, 
        labelString: 'Mois'
      }
    }]
  }]
}

How can I remove the axes title?

Same as above, just set the display as false.

options: {
  scales: [{
    xAxes: [{
      scaleLabel: {
        display: false, 
      }
    }],
    yAxes: [{
      scaleLabel: {
        display: false, 
      }
    }]
  }]
}

Stacked bars

How can I get the bars on top of one another?

Each axe has to be stacked: true.

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

Use an apostrophe

How can I use an apostrophe in a label?

You simply have to escape that character, which means putting a backslash (\) just before the apostrophe (the result will be \'). Then the apostrophe will be interpreted as a string (a graphic sign), not as a parameter opening or closing. Example:

options: {
  responsive: true,
  title: {
    display: true,
    text: 'Part des taxes dans le prix du kWh TTC de l\'électricité'
  },

Use special characters

How can I use special characters (ñ, è, ó, etc...) in a label?

Normally your pages are already coded in UTF-8 (Unicode Transformation Format – 8 bit) so you should not have problems in using those kinds of characters. But if you do, you simply have to look for the UNICODE standard code for the character your are trying to use, for example\u00F1 for the spanish 'ñ'.

Delete the legend

How can I delete the legend (the label one showing the colour on top of the chart)?

In the options, simply add legend: {display: false},.

options: {
  legend: { display: false },
}