Charts.js

Aggiornato il
min reading

Version française.

 

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.

The line below is the call to the JS file necessary for the charts to work. This call has to be done one time per page using chartjs

 

 

 

 

 

 

 

 

 

 

 


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="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <div class="chart-container" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><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..

  • 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.
  • SIZE: The size is customizable and the charts are automatically centered. It's easier to use percentages. You will find this setting on the first line:
    <div class="chart-container" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><canvas id="prixFioul2018"></canvas></div>
  • 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 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.

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).
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  • Give the same id to the canvas and at the beginning of the script:
    <div class="chart-container" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><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" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><canvas id="idUniqueForEachChart"></canvas></div>
    The size is fully customizable, in percentages (here "width:70%;"). The chart will be automatically centered (because of "margin-left:auto; margin-right:auto;"). If you want two (ore more) charts displayed on the same line, you have to give them a width smaller than 50%, and then delete the two margin attributes. Like this:
    <div class="chart-container" style="position: relative; width:40%; height:auto;"><canvas id="idUniqueForEachChart"></canvas></div>
  • Place, between two <script> tags, the code corresponding to the chart type, data, options... (field 3 on JSFiddle)
    <script> var ctx = document.getElementById('idUniqueForEachChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { [...] } }); </script>
  • 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.
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    • be sure that each chart has a different "id":
      <div class="chart-container" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><canvas id="chartNumberOne"></canvas></div> [...] <script>var ctx = document.getElementById('chartNumberOne').getContext('2d');[...]
      <div class="chart-container" style="position: relative; width:70%; height:auto; margin-left:auto; margin-right:auto;"><canvas id="chartNumberTwo"></canvas></div> [...] <script>var ctx = document.getElementById('chartNumberTwo').getContext('2d');[...]