g-legend

Pre styled and positioned legend for use with the FT's g-chartframe architecture as part of the Visual Vocabulary. As the name suggests it creates a legend that can be appended to the .plot obejct in the g-chartframe hopefully eliminating the need to code another standard legend for each template.

Installing

Add this line of code to the head of your index.html file

<script src="https://rawgit.com/ft-interactive/g-legend/master/build/g-legend.js"></script>

Getting started

Make sure you have these settings at the top of your index.html file with the rest of your chart settings

let legendAlign = "vert"//hori or vert, alignment of the legend
let legendType = 'rect' //rect, line or circ, geometry of legend marker

Add this code to your index.html file, this will define your legend and add it to your chart plot. The default for what the legend draws are your seriesNames.

const myLegend = gLegend.legend();

myLegend
  .seriesNames(seriesNames)
  .geometry(legendType)
  .rem(myChart.rem())
  .alignment(legendAlign)
  .colourPalette((frameName));  

currentFrame.plot()
  .append("g")
  .attr("id","legend")
  .selectAll(".legend")
  .data(seriesNames)
  .enter()
  .append("g")
  .classed("legend",true)
  .call(myLegend)