@flourish/legend

Flourish legend component

Installation

npm install --save @flourish/legend

Then import into you project like this: import createLegend from "@flourish/layout"

Initialize the legend component

In your template.yml, add:

- property: legend
  import: "@flourish/legend"

To your state, add:

state: {
  "legend": {}
}

Inside your template init code, initialize the legend component like this: var legend = createLegend(state.legend)

Add legend to your template

legend.appendTo(target_container) where target_container is a node element, for example layout.getSection("legend")

Add legend items to the legend and customise it

legend
  .type("ordinal") // String, "ordinal" is only option for now
  .data(array, color_function(optional)) // See explanation below
  .filtered(["Brazil"]) // Array, items that should have low opacity
  .on("click", function(d) { // Add event listener to legend items (eg. "click", "mouseover", etc.)
  	console.log(this, d, i); // Legend item node element, "Brazil", 0
  })
  .update(); // Update the legend

Adding data to the legend

There are two ways to add data to your legend.

1. An array of objects like this:

var legend_items = [
	{
		label: "Brazil",
		color: "#ff0000"
	},
	{
		label: "Argentina",
		color: "#000000"
	}
]
legend.data(legend_items);

1. An array of strings, with additional color function

var getColor = initializeColors(state.color).getColor; // Using Flourish custom colors module
// var getColor = function(label, i) { return color_list[label]; } // Or create your own function, referencing an object/array with colors

var legend_items = ["Brazil", "Argentina"];
legend.data(legend_items, getColor)

Additional options

legend.getContainer()

Gets the legend node element