-
Notifications
You must be signed in to change notification settings - Fork 555
dimple.legend
A legend object rendering a display of series values against colors.
#####Constructor#####
#####Properties#####
- dimple.legend.chart
- dimple.legend.height
- dimple.legend.horizontalAlign
- dimple.legend.series
- dimple.legend.shapes
- dimple.legend.width
- dimple.legend.x
- dimple.legend.y
dimple.legend(chart, x, y, width, height, horizontalAlign, series) [code] - Initialise a legend. A legend must have a chart passed into its constructor and it must also reside in this chart's legends property. It is therefore advisable to use chart.addLegend rather than invoking the constructor directly - as it takes care of the double link.
dimple.legend.height: The maximum vertical bounds of the legend in pixels. Any elements which fall outside this bound will not be rendered.
Example:
// Set the legend to be 100 pixels high
myLegend.width = 100;
dimple.legend.horizontalAlign: Accepted values are "left" and "right". This sets the horizontal positioning of the elements within the bounds defined. This does not affect individual legend entries, which will always render with the key on the left and the text on the right. As all elements are sized to the widest, the left edges of each element will always align even if this is set to right.
Example:
// Align the right edge of the legend to the x + width
myLegend.horizontalAlign = "right";
dimple.legend.series: One or more series to include in the legend. By default all chart series will be included, however this allows you to pick particular ones. If interacting directly with the property an array must be passed.
Example:
// Align the right edge of the legend to the x + width
myLegend.series = [myFirstSeries, mySecondSeries];
dimple.legend.shapes: Once a legend is rendered via the chart's draw method, this will contain the svg shapes allowing further manipulation with standard javascript or d3.
Example:
// Change the legend font
var myLegend = myChart.addLegend(10, 10, 300, 200);
myChart.draw();
// Resize fonts
myLegend.shapes.selectAll("text").style("font-size", "12px");
dimple.legend.width: The width in pixels of the legend's render area. Elements in the legend will wrap if their width exceeds this bound.
Example:
// Set the legend to be 200 pixels wide
myLegend.width = 200;
dimple.legend.x: The x co-ordinate in pixels for the upper left hand corner of the legend's render area. If horizontalAlign is set to "left" the legend entries will align to this co-ordinate.
Example:
// Set the legend to render 10 pixels from the left edge of the svg
myLegend.x = 10;
dimple.legend.y: The y co-ordinate in pixels for the upper left hand corner of the legend's render area.
Example:
// Set the legend to render 10 pixels from the top edge of the svg
myLegend.y = 10;