ChartJS samples

We prefer using Chartjs rather than Google Charts because the resulting performances are way better. You will find below a sample of the different possibilities with Chartjs.

If needed, you can check the source at Chartjs' page (only for the brave).

At the end of the page, you will find the instructions to implement Chartjs on your article.

ChartJS : Bar

ChartJS : Line

 

ChartJS : Line 2

 

ChartJS : Vertical bar simple

 

ChartJS : Vertical bar multiple

 

ChartJS : vertical bar multiple 2

 

ChartJS : Vertical Bar Multiple 3

 

ChartJS : Vertical Bar multiple 4

 

ChartJS : Horizontal bar

 

ChartJS : Pie

 

ChartJS : Doughnut

 

ChartJS : Pie Multiple

 


As you were doing with Google Charts, you can use JS Fiddle to make changes and see them live and quickly (and not having to wait each time you update your article/page). Just follow the instructions below.

Instructions

There are different fields to use in JS Fiddle
JS Fiddle preview with the different fields you may use.
  • Open a new JS Fiddle and paste, in the HTML (field 2) the following code:

    <script src="/themes/custom/agrippa/js/lib/Chart.min.js"></script> <div class="chart-container"> <canvas id="prixFioul2018"></canvas> </div>

    Note: The first line is the call to the JS file necessary for the charts to work (Chart.min.js). This call has to be done one time per page using chartjs.

    Note: For awesome symphonies template, you should use that path "/themes/custom/awesome_zymphonies_theme/js/chart.min.js"

  • In the JavaScript field (field 3), paste the following code:

    var ctx = document.getElementById('prixFioul2018').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"], datasets: [{ label: "Année 2018", backgroundColor: 'rgba(255, 140, 0, 0.2)', borderColor: 'rgb(255, 140, 0)', data: [801, 892, 874, 862, 874, 907, 932, 929, 924, 953, 1031, 987], }] }, options: { responsive: true, title: { display: true, text: 'Évolution des prix du fioul domestique en 2018. Source: DIREM' }, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true, }, scales: { xAxes: [{ display: true, scaleLabel: { display: false, labelString: 'Mois' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Eur/1000L' } }] } } });
  • Hit "RUN" (field 1)

    The following chart appears in the field 4:

  • From this point you can easily replace data, titles, labels, colors, etc... It is critical to be careful and avoid deleting quote marks, commas, brackets, curly brackets, and else. They are really important!

There is a big amount of customizable options for Chartjs. Click here to explore these options at the root (only for the brave). Otherwise, you will find some of the most common options right after these lines. The aim of this document is to be 100% enough for the content editors, so don't hesitate to suggest changes or ask for more accuracy.

Options

  • CHART TYPE: The first choice is the type of chart you want. There are many options, here are the most common ones (that we used on this page): line, bar, horizontalBar, pie, doughnut. This option has to be setup at the beginning of the JavaScript code:
    var ctx = document.getElementById('prixFioul2018').getContext('2d'); var chart = new Chart(ctx, { type: 'line',
    There are a bunch of different options. If you can't find the one you want here, you should go to ChartJS's samples, and let us know to add this new example on this page.
  • DATA: Data has to be declared in the field "data"
    data: { labels: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"], datasets: [{ label: "Année 2018", backgroundColor: 'rgba(255, 140, 0, 0.2)', borderColor: 'rgb(255, 140, 0)', data: [801, 892, 874, 862, 874, 907, 932, 929, 924, 953, 1031, 987], }] },
  • DATA (II): It's quite common to need more than one "dataset" (ex. Chart type Line; Chart type Horizontal Bar; Chart type Multiple Pie...)
    data: { labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"], datasets: [{ label: "Année 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: "Année 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], } ] },
  • COLORS: Colors are customizable, also in the "data" field:
    data: { labels: ["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"], datasets: [{ label: "Année 2018", backgroundColor: 'rgba(255, 140, 0, 0.2)', borderColor: 'rgb(255, 140, 0)', data: [801, 892, 874, 862, 874, 907, 932, 929, 924, 953, 1031, 987], }] },

    Selectra-friendly colors:

    Azure Blue
    rgba(18,166,208,1)
    Buttercup Orange
    rgba(245,164,34,1)
    Information Blue
    rgba(136,210,231,1)
    Warning Orange
    rgba(245,121,34,1)
    Danger Red
    rgba(245,34,34,1)
    rgba(18,166,208,1)
    rgba(245,164,34,1)
    rgba(136,210,231,1)
    rgba(245,121,34,1)
    rgba(245,34,34,1)
    rgba(18,166,208,.7)
    rgba(245,164,34,.7)
    rgba(136,210,231,.7)
    rgba(245,121,34,.7)
    rgba(245,34,34,.7)
    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)
    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)
    • Designer's tip:
    • If possible, avoid using "all" colors at once. The rainbow effect is not the best here. It's better to combine different shades of complementary colors (ex. blues and oranges), also different shades of the same color.
    • How to use different shades of the same color? That's quite easy, since Chartjs is using RGBA colors (red, green, blue, alpha). The mixture of the three first parameters sets the color up; the last parameter stands for the opacity: 0 is completely transparent, 1 is completely opaque. By changing this parameter (0,1; 0,2; 0,3...), we obtain more or less transparent versions of the same color. Be careful not using commas but dots. The 0 is not necessary (ex: "0,3" becomes ".3").
    • Combining an opaque color with his translucent version is also quite beautiful, as you can see on some of the samples.
    • If you need more colors and you run out of inspiration, you can visit Adobe's interactive chromatic circle, it should be helpful!
    Disclaimer: it's great to use beautiful colors, but our purpose is the accessibility, then we must give clear and readable information. Avoid using colors that look the same, or colors too transparent.
  • COLORS (II): If you want to use multiple colors, it depends on the type of the chart you are using:
    • Lines, Bars, Multiple Pies... Multiple datasets, one color for each:
      data: { datasets: [{ label: "Année 2018", backgroundColor: 'rgba(18,166,208,0)', borderColor: 'rgba(18,166,208,1)', data: [801, 892, 874, 862, 874, 907, 932, 929, 924, 953, 1031, 987], }, { label: "Année 2019", backgroundColor: 'rgba(245,164,34,0)', borderColor: 'rgba(245,164,34,1)', data: [881, 882, 884, 882, 884, 987, 982, 989, 984, 983, 1081, 987], }, { label: "Année 2020", backgroundColor: 'rgba(245,34,34,0)', borderColor: 'rgba(245,34,34,1)', data: [481, 482, 484, 482, 484, 487, 482, 489, 484, 483, 481, 487], }, ] },
    • Pie, Doughnut... One color for each data:
      data: { labels: ["Pommes", "Poires", "Bananes", "Kiwis", "Dragonfruits"], datasets: [{ label: "Année 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 ], }] },
      Warning! Be careful and use the simple quote marks (') when needed, or it will not work!
  • 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)
    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}, }] } },

Warning! You are writing in JavaScript! It's a good thing, very useful but quite sensitive... If you forget one single bracket ( ] ), or you add a blank where you should not, or you delete a comma... the chart will not be displayed at all, and it will be difficult to find the mistake.
That's why we recommend using JSFiddle to apply the changes one by one, clicking on "RUN" each time to check if it's working!


  • Some simple rules:
  • Camel case: you may have noticed that the names and values are written in lowercase letters (except when there are multiple words) and numbers, without blankspaces or special characters (ex: "thisIsAnExample").
  • Brackets [ ], curly brackets { } and parenthesis ( ): watch out and don't delete opening or closing characters, the chart will not work! You have to be specially careful when adding or modifying elements.
  • Commas: essential to end a parameter and begin the next one.

You can write your questions down here. We will answer ASAP, to end up with a complete and useful FAQ section.

FAQ

  • How can I set the axes origin starting at zero?
    • In the "options", look for the concerned axe (or both, depending on what you want). Add "ticks: {beginAtZero: true},".
      options:{ yAxes: [{ ticks: {beginAtZero: true}, }] }
  • How can I set data in percentage?
    • In the javascript code, look for the "tooltips" category. And add a callback code. The whole code should look like the one below
      tooltips: { mode: 'nearest', intersect: false, callbacks: { label: function(tooltipItems, data) { return tooltipItems.yLabel + '%'; } } }
  • How can I setup a max value for an axis?
    • In "options", look for the concerned axis (or both). Add "ticks: {suggestedMax: 100},", where "100" will be the max value. Replace 100 by the value you want.
      options:{ yAxes: [{ ticks: {beginAtZero: true, suggestedMax: 100}, }] }
  • How to avoid "rounded lines" (in chart type: line) and get them straight?
    • In the "data", look for the concerned dataset and add "lineTension: 0,".
      data: { datasets: [{ label: "Année 2018", lineTension: 0, }] }
  • How to remove the background color and keep only the outline?
    • In the "data", look for the concerned dataset and set the "backgroundColor" on transparent, that is "rgba(X,X,X,0)".
      data: { datasets: [{ label: "Année 2018", backgroundColor:'rgba(18,166,208,0)', }] }
  • How can I modify the axes title?
    • The title is setup in the "options". Look for the concerned axe ("xAxes" or "yAxes"). Set the "labelString" as you wish. Note that the "scaleLabel" has to be displayed, to see any changes.
      options: { scales: [{ xAxes: [{ scaleLabel: { display: true, labelString: 'Eur/1000L' } }], yAxes: [{ scaleLabel: { display: true, labelString: 'Mois' } }] }] }
  • How can I remove the axes title?
    • Have a look on the answer just above, the "display" has to be "false".
  • How can I get the bars on top of one another?
    • Each axe has to be stacked.
      options: { scales: [{ xAxes: [{ stacked: true, }], yAxes: [{ stacked: true, }] }] }
  • How can I use an apostrophe?
    • You simply have to put a backslash ( \ ) just before the apostrophe (-> \' )to get the apostrophe interpreted as a graphic sign, and not as a parameter opening or closing.
  • How can I delete the top "label" (the one showing the colour)?
    • In "options", add "legend: {display: false},".
      options: { legend: { display: false }, }

Implement your chart on a page:

Once your chart is beautiful and functional, you are ready to use it on your page or article.

  • Make the call to the file chart.min.js, once per page, at the beginning or the end (in the content).
    Warning! For performance purposes, you must keep the call inside your site. If you don't know how to do that, please ask for support (Mélanie Nguon for example).
  • Give the same id to the canvas and at the beginning of the script:
    <div class="chart-container chart-container--size-2"> <canvas id="idUniqueForEachChart"></canvas> </div> <script> var ctx = document.getElementById('idUniqueForEachChart').getContext('2d'); var chart = new Chart(ctx, { type: ' [...]
    It's even better if the selected id corresponds to the content of your chart, for example prixFioul2018 or frenchProvidersMarketRepartition.
  • Place this line where you want your chart displayed:
    <div class="chart-container chart-container--size-2"> <canvas id="idUniqueForEachChart"></canvas> </div>
    Warning! Please note the class chart-container--size-2. This class is there for responsive purposes, you can choose between 4 different heights (chart-container--size-1, chart-container--size-2, chart-container--size-3, chart-container--size-4). This will setup a height for your chart and make it mobile-friendly. That will be effective only for devices under 768px wide.

     

    So if you want your chart to be nice on mobiles, you'll have to try which class displays better. chart-container--size-1 and chart-container--size-4 are extremes and will probably not be what you're looking for. Just check it!

  • Place, between the code below, the code corresponding to the chart type, data, options... (field 3 on JSFiddle)
    <script> window.addEventListener('load', function() { YOUR CODE HERE var mediaQuery = window.matchMedia( '(min-width: 768px)' ); function toggleAspectRatio( mq ) { chart.options.maintainAspectRatio = mq.matches; chart.resize(); } toggleAspectRatio( mediaQuery ); mediaQuery.addListener( toggleAspectRatio ); }) </script>
    No matter where you put this code (<script>[...]</script>), the chart will work. We suggest you to put it right after the <div class="chart-container [...] /div>
  • Note: if you are going to use two charts on the same page, you have to:
    • be sure that the js file calling is made one time on the page.
    • be sure that each chart has a different "id":
      <div class="chart-container chart-container--size-2"><canvas id="chartNumberOne"></canvas></div> [...] <script>var ctx = document.getElementById('chartNumberOne').getContext('2d');[...]
      <div class="chart-container chart-container--size-2"><canvas id="chartNumberTwo"></canvas></div> [...] <script>var ctx = document.getElementById('chartNumberTwo').getContext('2d');[...]

Mis à jour le