[v1.10.0] Axis Annotations and Expanding Interpolated Color Legends

This week, Plottable is releasing Axis Annotations: special labels on Axes that call out interesting or important values. Additionally, InterpolatedColorLegends can now expand lengthwise to occupy available space. There is also a new configuration point for removing <title> elements from the DOM.

A bug fix for Plots.Bar's entityNearest() function now correctly identifies the nearest entity, even for entities partially drawn on the SVG. Plots.Rectangle and Plots.Bar now render the same color blue as all other Plottable Plots by default.

Features

Axis Annotations

Axis annotations are a visualization on top of an axis that places special tick values into separate containers. This helps the user determine which values are interesting and deserve more attention.

The annotations can be styled with CSS using the following selectors:

• .plottable .axis .annotation-circle
• .plottable .axis .annotation-line
• .plottable .axis .annotation-rect

New API points:

/**
 * Gets the annotated ticks.
 */
annotatedTicks(): D[];
/**
 * Sets the annotated ticks
 */
annotatedTicks(annotatedTicks: D[]): Axis<D>;
/**
 * Gets the formatter for the annotations
 */
annotationFormatter(): Formatter;
/**
 * Sets the formatter for the annotations
 */
annotationFormatter(annotationFormatter: Formatter): Axis<D>;
/**
 * Gets if annotations are enabled
 */
annotationsEnabled(): boolean;
/**
 * Sets if annotations are enabled
 */
annotationsEnabled(annotationsEnabled: boolean): Axis<D>;
/**
 * Gets the count of annotation tiers to render
 */
annotationTierCount(): number;
/**
 * Sets the count of annotation tiers to render
 */
annotationTierCount(annotationTierCount: number): Axis<D>;

Try it out: https://jsfiddle.net/bluong63/nup2ya6w/1/

Another example, combining axis annotations with DragBoxLayer: https://jsfiddle.net/bluong63/0y30f2q3/2/

Expanding InterpolatedColorLegend

InterpolatedColorLegend can now expand lengthwise to occupy all available space using expands(true).

New API points:

/**
 * Gets whether the InterpolatedColorLegend expands to occupy all offered space 
 * in the long direction
 */
public expands(): boolean;
/**
 * Sets whether the InterpolatedColorLegend expands to occupy all offered space
 * in the long direction
 */
public expands(expands: boolean): InterpolatedColorLegend;

Try it out: http://jsfiddle.net/ztsai/wgx8o4ua/

Configuration option for <title> elements

Plottable Legends normally display a tooltip (the <title> element) when the mouse hovers over the entry text. This can be helpful if the text would otherwise be cut off:

You can now disable these tooltips by setting the following configuration option to false:

module Plottable {
  export module Configs {
    /**
     * Specifies whether Plottable should add <title> elements to text
     */
     var ADD_TITLE_ELEMENTS: boolean;
  }
}

NOTE: The option must be set before the Legend is rendered.

Bug Fixes

• Previously, Plots.Bar entities lying below the baseline and partially out of the SVG were not considered by entityNearest(). This has been fixed. #2670
• Plots.Rectangle and Plots.Wheel used to render black if the fill was not explicitly set. Now, both plots render blue, the same default color as all other Plots. #2720