@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
342 lines (265 loc) • 9.65 kB
TypeScript
import { Property, Complex, ChildProperty, extend, getValue} from '@syncfusion/ej2-base';import { measureText, Rect, TextOption, Size, PathOption, CanvasRenderer } from '@syncfusion/ej2-svg-base';import { Chart, ILegendRegions } from '../../chart';import { Font, Border, Margin, Location, ContainerPadding, Accessibility } from '../model/base';import { MarginModel, FontModel, BorderModel, LocationModel, ContainerPaddingModel, AccessibilityModel } from '../model/base-model';import { subtractThickness, Thickness, drawSymbol, ChartLocation, titlePositionX, getTitle, textTrim, getTextAnchor } from '../utils/helper';import { RectOption, textElement, stringToNumber } from '../utils/helper';import { removeElement, showTooltip, getElement, appendChildElement } from '../utils/helper';import { ChartSeriesType, ChartShape, LegendMode } from '../../chart/utils/enum';import { Series } from '../../chart/series/chart-series';import { AccumulationType } from '../../accumulation-chart/model/enum';import { AccumulationChart } from '../../accumulation-chart/accumulation';import { BulletChart } from '../../bullet-chart/bullet-chart';import { Alignment, LegendTitlePosition, TextWrap, LabelOverflow, LegendShape, LegendPosition, LegendLayout} from '../utils/enum';import { StockChart } from '../../stock-chart';import { Chart3D } from '../../chart3d';import { CircularChart3D } from '../../circularchart3d';
/**
* Interface for a class LegendSettings
*/
export interface LegendSettingsModel {
/**
* If set to true, the legend will be displayed for the chart.
*
* @default true
*/
visible?: boolean;
/**
* Specifies the height of the legend in pixels.
*
* @default null
*/
height?: string;
/**
* Specifies the width of the legend in pixels.
*
* @default null
*/
width?: string;
/**
* Specifies the location of the legend relative to the chart.
* If x is 20, the legend moves 20 pixels to the right of the chart.
> Note that the `position` must be set to `Custom` for this feature to work.
* ```html
* <div id='Chart'></div>
* ```
* ```typescript
* let chart: Chart = new Chart({
* ...
* legendSettings: {
* visible: true,
* position: 'Custom',
* location: { x: 100, y: 150 }
* }
* ...
* });
* chart.appendTo('#Chart');
* ```
*/
location?: LocationModel;
/**
* Sets the position of the legend in the chart.
* Available options include:
* * Auto - Places the legend according to the area type.
* * Top - Displays the legend at the top of the chart.
* * Left - Displays the legend on the left side of the chart.
* * Bottom - Displays the legend at the bottom of the chart.
* * Right - Displays the legend to the right of the chart.
* * Custom - Displays the legend according to the given x and y position values.
*
* @default 'Auto'
*/
position?: LegendPosition;
/**
* Defines the mode for displaying legend items.
* * Series - Legend items are generated based on the count of series.
* * Point - Legend items are created according to each unique data point.
* * Range - Legend items are generated based on the range color mapping property.
* * Gradient - Displays a single linear bar that represents the range color mapping property.
> Note that this property is applicable only for the chart component.
*/
mode?: LegendMode;
/**
* Option to customize the padding around the legend items.
*
* @default 8
*/
padding?: number;
/**
* Option to customize the padding between legend items.
*
* @default null
*/
itemPadding?: number;
/**
* Defines the alignment of the legend in the chart.
* The options are:
* * Near - Aligns the legend to the left of the chart.
* * Center - Aligns the legend to the center of the chart.
* * Far - Aligns the legend to the right of the chart.
*
* @default 'Center'
*/
alignment?: Alignment;
/**
* The `textStyle` property provides options to customize the appearance of the text in the legend, including the font family, size, style, weight, and color.
*/
textStyle?: FontModel;
/**
* Specify the height of the legend in pixels.
*
* @default 10
*/
shapeHeight?: number;
/**
* Specify the width of the legend in pixels.
*
* @default 10
*/
shapeWidth?: number;
/**
* Options for customizing the border of the legend.
*/
border?: BorderModel;
/**
* Options for customizing the left, right, top, and bottom margins of the chart.
*/
margin?: MarginModel;
/**
* Options to customize the left, right, top, and bottom padding for the chart legend container.
*/
containerPadding?: ContainerPaddingModel;
/**
* Padding between the legend shape and text.
*
* @default 8
*/
shapePadding?: number;
/**
* The background color of the legend, which accepts values in hex and rgba as valid CSS color strings.
*
* @default 'transparent'
*/
background?: string;
/**
* Customizes the opacity of the legend.
*
* @default 1
*/
opacity?: number;
/**
* If set to true, the series visibility will collapse based on the legend's visibility.
*
* @default true
*/
toggleVisibility?: boolean;
/**
* If set to true, the series will be highlighted when hovering over the legend.
*
* @default false
*/
enableHighlight?: boolean;
/**
* A description of the legend that provides additional information for screen readers.
*
* @default null
*/
description?: string;
/**
* The `tabIndex` property determines the order in which the legend receives focus when navigating through elements with the keyboard.
*
* @default 3
*/
tabIndex?: number;
/**
* Specifies the title of the legend.
*
* @default null
*/
title?: string;
/**
* The `titleStyle` property configures the font settings for the legend title, including font family, size, style, weight, and color.
*/
titleStyle?: FontModel;
/**
* The `titlePosition` property specifies the position of the legend title.
* Available options are:
* * Top - Aligns the title to the top of the legend.
* * Left - Aligns the title to the left of the legend.
* * Right - Aligns the title to the right of the legend.
*
* @default 'Top'
*/
titlePosition?: LegendTitlePosition;
/**
* Defines the text wrap behavior for the legend text when it overflows.
* Available options are:
* * `Normal` - Specifies that words should only break at allowed break points.
* * `Wrap` - Specifies that a word should break if it is too long to fit on a line by itself.
* * `AnyWhere` - Specifies to break a word at any point if there are no acceptable break points in the line.
*
* @default 'Normal'
*/
textWrap?: TextWrap;
/**
* Defines the behavior for handling the overflow of legend text.
* * `Clip` - Specifies that the text is clipped and not accessible.
* * `Ellipsis` - Specifies an ellipsis (“...”) for the clipped text.
*
* @default 'Ellipsis'
*/
textOverflow?: LabelOverflow;
/**
* Specifies the maximum width of the legend title.
*
* @default 100
*/
maximumTitleWidth?: number;
/**
* Specifies the maximum width of the legend text labels.
*
* @default null
*/
maximumLabelWidth?: number;
/**
* If set to true, the legend will be displayed using pages.
*
* @default true
*/
enablePages?: boolean;
/**
* If `isInversed` is set to true, it inverses the legend item content (image and text).
*
* @default false.
*/
isInversed?: boolean;
/**
* If `reverse` is set to true, it reverses the order of the legend items.
*
* @default false
*/
reverse?: boolean;
/**
* Specifies the layout of the legend items in the chart.
* Available options are:
* * `Vertical`: Legend items are arranged in a single column. If the legend items exceed the available space, paging is automatically applied to allow the user to navigate through the legend.
* * `Horizontal`: Legend items are arranged in a single row. If the legend items exceed the available space, paging is automatically applied to allow the user to navigate through the legend.
* * `Auto` (default): Legend items are placed based on the available space.
*
* @default 'Auto'
*/
layout?: LegendLayout;
/**
* Specifies the maximum number of columns to allow in the available space when the layout is set to 'Auto'.
*
* @default null
*/
maximumColumns?: number;
/**
* When set to true, all legend items are rendered with an equal width, which is the maximum width of all items.
*
* @default false
*/
fixedWidth?: boolean;
/**
* Options to improve accessibility for legend elements.
*/
accessibility?: AccessibilityModel;
}
/**
* Interface for a class BaseLegend
* @private
*/
export interface BaseLegendModel {
}
/**
* Interface for a class LegendOptions
* @private
*/
export interface LegendOptionsModel {
}