Title and Subtitle

In this section, we will get an understanding of how we can provide a title and a subtitle to the canvas.

Add title and subtitle

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.

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.

 muze.canvas
  .title('Distribution of Power to Weight ratio of cars')
  .subtitle('Based on their manufacturing origin')

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Horsepower";
const ColumnField = "Weight_in_lbs";
const ColorField = "Origin";
const DetailField = "Name";

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .color(ColorField)
  .detail([DetailField])
  .title("Distribution of Power to Weight ratio of cars")
  .subtitle("Based on their manufacturing origin")
  .mount("#chart");

Positioning and aligning the 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:

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const RowField = "Horsepower";
const ColumnField = "Weight_in_lbs";
const ColorField = "Origin";
const DetailField = "Name";
const html = muze.Operators.html;

muze
  .canvas()
  .data(data)
  .rows([RowField])
  .columns([ColumnField])
  .color(ColorField)
  .detail([DetailField])
  .title("Distribution of Power to Weight ratio of cars")
  .subtitle("Based on their manufacturing origin", {
    position: "bottom",
    align: "right",
  })
  .mount("#chart");