Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.

I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:

`options: { ... 
  footer: {
    display: true,
    text: 'data from xy'
  }
}`

I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.

EDIT/UPDATE: I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.

Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.

`var myChart = new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
   legend: { ... },
   ... 
   legendCallback: function(){
    return '<p>bla bla</p>';
   },
  ...
 },
});
document.getElementById('legendID').innerHTML = 
myChart.generateLegend();` 

adding AFTER the canvas a div to append the new HTML element <div id=legendID></div>

Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.

Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.

Using Chart.js 2.0. I'm looking for a way to add a footer (line of text) at the bottom of the chart in order to display sources of data.

I tried to solve it via the option object, the same way as title and legend are included and modified. Like this:

`options: { ... 
  footer: {
    display: true,
    text: 'data from xy'
  }
}`

I saw 'footer' several times mentioned in the documentation and ways to style it or use it in the context of 'tooltips', but haven't seen anything how to add it concretely.

EDIT/UPDATE: I've found two workarounds (but no perfect solution) to add a footer to the chart while trying to solve this. In case someone is running into same problem like I did, here some suggestions how to solve this.

Nr. 1: adding a HTML element. This workaround has the disadvantage that the added HTML element is not shown if a user downloads the chart as a .png. Maybe this is the best solution, if the element doesn't have to be visible if a user downloads the chart as a .png.

`var myChart = new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
   legend: { ... },
   ... 
   legendCallback: function(){
    return '<p>bla bla</p>';
   },
  ...
 },
});
document.getElementById('legendID').innerHTML = 
myChart.generateLegend();` 

adding AFTER the canvas a div to append the new HTML element <div id=legendID></div>

Nr. 2: adding another dataset which is empty but a label which contains the information that is supposed to be displayed. borderColor and backgroundColor set to transparent. Adding some empty labels (" ") gives some distance between labels and the footer which is added. The disadvantage of this workaround are the limited possibilities for styling.

Nr. 3: the solution of ana liza. This finally works best for my case since the added info is visible on the .png.

• javascript
• chart.js

1 Answer 1

From the official docs:

Labeling Axes

When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.

The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.

You can add labels for both axes but in your case, since you only need it on the x-axis, your chart options should look similar to this.

var options = {
  scales: {
    xAxes: [
      {
        scaleLabel: {
          display: true,
          labelString: 'Party size',
          fontColor: '#C7C7CC',
          fontSize: 11
        }
      }
    ]
  }
};