Adding Legends

Selecting the right legend

Muze provides ability to encode your information into different color, shape or size . Like different categorial values can be broken into multiple colors or shape where as a quantitative value can be encoded into different size ranges.

Muze supports following types of legend :

• Discrete Legends
  • Color Legend
  • Shape Legend
  • Size Legend
• Continuous Legends
  • Gradient Legend
  • Step Legend

Adding a discrete color legend

Color Legends can be used to show both categorical data and quantitative values. If fieldName is dimension , then a discrete legend is created.

muze.canvas().color("Cylinders");

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

muze
  .canvas()
  .data(data)
  .rows(["Miles_per_Gallon"])
  .columns(["Origin"])
  .color("Cylinders")
  .mount("#chart");

Adding a Gradient Legend

Gradient legend can be added in muze by adding a measure field in color.

When you add a measure field in color, Muze automatically colors the plots using the measure and adds a gradient legend.

muze.canvas().color("Horsepower");

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

muze
  .canvas()
  .data(data)
  .rows(["Miles_per_Gallon"])
  .columns(["Origin"])
  .color("Horsepower")
  .mount("#chart");

Adding a size and shape Legend

Size Legend

Size legends are mostly used to encode measure.

Below are the ways a Size Legend can be configured.

...
  muze.canvas().size('Miles_per_Gallon');
...

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

muze
  .canvas()
  .data(data)
  .rows(["Weight_in_lbs"])
  .columns(["Horsepower"])
  .detail(["Name"])
  .size("Miles_per_Gallon")
  .mount("#chart");

• You can give number of stops or a custom range

...
  muze.canvas().size({
    field : 'Horsepower',
    stops : 10,
   //stops : [20,30,50,120]
  })
...

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

muze
  .canvas()
  .data(data)
  .rows(["Displacement"])
  .columns(["Miles_per_Gallon"])
  .size({
    field: "Horsepower",
    stops: 10,
  })
  .detail(["Maker"])
  .mount("#chart");

Shape Legend

Shape legend are mostly used for categorical data visualisation.

Below are the ways a Shape Legend can be configured.

...
  muze.canvas().shape('Cylinders');
...

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

muze
  .canvas()
  .data(data)
  .rows(["Displacement"])
  .columns(["Miles_per_Gallon"])
  .shape("Cylinders")
  .detail(["Maker"])
  .mount("#chart");

Customizing the legend

Legends can be customized in different ways like changing position, alignment of text, icon size and more.

Below are the ways how legend can be customized.

Position

....
  canvas.config({
    legend: {
      position: 'bottom'
    }
  });
....

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

muze
  .canvas()
  .rows(["Acceleration"])
  .columns(["Cylinders"])
  .data(data)
  .config({
    legend: {
      position: "bottom",
    },
  })
  .color("Cylinders")
  .mount("#chart");