Text and fonts

Text can be included in many different objects. Each data object can have a list of categories, each dataset can have a legend, the chart can have a title, and tooltips can have titles and other information. Some text is visible or invisible by default. You can configure the visibility, font families, font sizes, and colors of any text inside a chart.

Fonts can be applied globally (for all charts) using default configurations. Using the options configuration object, they can be applied locally to titles and legends, which are also configured as objects.

In our chart, we have a single dataset, which makes the legend superfluous. You can hide it by changing the legend.display property to false, as follows:

options: { // configure options here
...
legend: {
display: false
}
}

We can also give the chart a title and configure its font size, color, and family, as follows:

options: { // configure options here
maintainAspectRatio: false,
legend: {
display: false
},
title: {
display: true,
text: ['Volume of the oceans','in thousands of cubic km'],
fontFamily: "TrebuchetMS",
fontSize: 24,
fontColor: 'rgb(0,120,0)',
}
}

It's not enough to simply add the title to the text property. Since the display property is false by default, you must explicitly define it to be true for the title to be displayed. With these changes, your chart should look similar to the following:

Adding a title and defining font properties (code: Pages/BarChart5.html)

You can configure the style of all of the text in the chart, including individual tooltip titles and bodies, scales, and major and minor ticks, as we will see in the following chapters.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset