Title and Subtitle

In this section, we will get an understanding of how we can provide a title and a subtitle to the canvas. To do so, we will be using the cars.csv data to form our canvases and apply titles accordingly based on the type of charts.

Adding a title / subtitle to the chart

You can add a title to the chart by using the title method on canvas. Similarly, to add a subtitle, you can use the subtitle method on canvas. Both the title and the subtitle methods accept parameters in the same way.

In order to add a title/subtitle, we first have to provide the content for the title/subtitle.

Adding simple text content

You can either add plain text to the title/subtitle or you can use the html operator of Muze to create your custom html markup as the title/subtitle. Let us see how to add them to our canvas.

Let us first make a sample for the distribution of the power to weight ratio, colored by the origin of manufacturing of the car:

main
run-button
run-button
reset-button
// DataModel instance is created from https://www.charts.com/static/cars.json data,
// https://www.charts.com/static/cars-schema.json schema and assigned to variable dm.
  
const env = muze();
const canvas = env.canvas();

canvas
  		.data(dm)
		.width(600)
		.height(400)
        .rows(['Horsepower'])
        .columns(['Weight_in_lbs'])
  		.color('Origin')
  		.detail(['Name'])
		.title('Distribution of Power to Weight ratio of cars')
		.mount('#chart-container') /* Attaching the canvas to DOM element */

Notice the title in the top-left of the canvas. We will learn how to change the position of this title subsequently.

Let us now add a subtitle to the chart. Since the chart is colored based on the country where they were manufactured, we will add the subtitle: Based on their manufacturing origin to our canvas.

main
run-button
run-button
reset-button
// DataModel instance is created from https://www.charts.com/static/cars.json data,
// https://www.charts.com/static/cars-schema.json schema and assigned to variable dm.
  
const env = muze();
const canvas = env.canvas();

canvas
  		.data(dm)
		.width(600)
		.height(400)
        .rows(['Horsepower'])
        .columns(['Weight_in_lbs'])
  		.color('Origin')
  		.detail(['Name'])
		.title('Distribution of Power to Weight ratio of cars')
  		.subtitle('Based on their manufacturing origin')
		.mount('#chart-container') /* Attaching the canvas to DOM element */

Adding html content

We can also add our own custom html component to Muze instead of plain text by using the the html operator. The html operator accepts content with inline html tags in string format which gets converted into DOM tree in a safe way which Muze internally then renders.

For example, we can take the last example and change the title into an italic text using the html operator:

main
run-button
run-button
reset-button
// DataModel instance is created from https://www.charts.com/static/cars.json data,
// https://www.charts.com/static/cars-schema.json schema and assigned to variable dm.

const html = muze.Operators.html;
const env = muze();
const canvas = env.canvas();

canvas
  		.data(dm)
		.width(600)
		.height(400)
        .rows(['Horsepower'])
        .columns(['Weight_in_lbs'])
  		.color('Origin')
  		.detail(['Name'])
    	.title(html`<i>Distribution of <u>Power</u> to <u>Weight</u> ratio of cars<i>`)
  		.subtitle('Based on their manufacturing <b>origin</b>')
		.mount('#chart-container') /* Attaching the canvas to DOM element */

Configuring title and subtitle

In addition to altering text for the title and subtitle, we can change their position and alignment configurations by supplying the required configuration in the second argument of the title or subtitle methods. These configurations are applicable independently to both the title and the subtitle.

  • position: TOP or BOTTOM (default TOP)
  • align: LEFT, RIGHT or CENTER (default LEFT)

By default the title and subtitle are drawn on the top left of the canvas. By specifying the position, we can change the way they appear.

For example, if we want to change the position of the subtitle to the bottom right of the canvas, we can provide the following configuration:

main
run-button
run-button
reset-button
// DataModel instance is created from https://www.charts.com/static/cars.json data,
// https://www.charts.com/static/cars-schema.json schema and assigned to variable dm.

const html = muze.Operators.html;
const env = muze();
const canvas = env.canvas();

canvas
  		.data(dm)
		.width(600)
		.height(400)
        .rows(['Horsepower'])
        .columns(['Weight_in_lbs'])
  		.color('Origin')
  		.detail(['Name'])
    	.title(html`<i>Distribution of <u>Power</u> to <u>Weight</u> ratio of cars<i>`, {
			position: 'bottom',
  			align: 'right'
		})
  		.subtitle('Based on their manufacturing <b>origin</b>', {
			position: 'bottom',
  			align: 'right'
		})
		.mount('#chart-container') /* Attaching the canvas to DOM element */

Wrapping Up

We have learnt how to use titles and subtitles in our canvas to give context to what the canvas visualizes.