@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.
291 lines (224 loc) • 7.21 kB
TypeScript
import { Browser, ChildProperty, Complex, Property, extend, remove } from '@syncfusion/ej2-base';import { Chart3DSeries} from '../series/chart-series';import { Border, ContainerPadding, Font, Indexes, Margin } from '../../common/model/base';import { Chart3D, Chart3DPoint } from '../../chart3d';import { Chart3DLegendMode, Chart3DSeriesType } from '../../chart3d/utils/enum';import { textTrim, ChartLocation, removeElement} from '../../common/utils/helper';import { getUnicodeText} from '../../common/utils/helper';import { Size, measureText, Rect, getElement } from '@syncfusion/ej2-svg-base';import { legendRender, legendClick, regSub, regSup} from '../../common/model/constants';import { Chart3DAxis } from '../axis/axis';import { Alignment, LabelOverflow, LegendPosition, LegendTitlePosition, TextWrap } from '../../common/utils/enum';import { textWrap } from '../../common/utils/helper';import { Chart3DLegendClickEventArgs, Chart3DLegendRenderEventArgs } from '../model/chart3d-Interface';import { BorderModel, ContainerPaddingModel, FontModel, LocationModel, MarginModel } from '../../common/model/base-model';import { Location } from '../../common/model/base';
/**
* Interface for a class Chart3DLegendSettings
*/
export interface Chart3DLegendSettingsModel {
/**
* If set to true, the legend will be displayed for the chart.
*
* @default true
*/
visible?: boolean;
/**
* The height of the legend in pixels.
*
* @default null
*/
height?: string;
/**
* 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, legend moves by 20 pixels to the right of the chart. It requires the `position` to be `Custom`.
* ```html
* <div id='Chart'></div>
* ```
* ```typescript
* let chart3D: Chart3D = new Chart3D({
* ...
* legendSettings: {
* visible: true,
* position: 'Custom',
* location: { x: 100, y: 150 },
* },
* ...
* });
* chart3D.appendTo('#Chart');
* ```
*/
location?: LocationModel;
/**
* Position of the legend in the chart. Available options include:
* * Auto: Places the legend based on the area type.
* * Top: Displays the legend at the top of the chart.
* * Left: Displays the legend at the left of the chart.
* * Bottom: Displays the legend at the bottom of the chart.
* * Right: Displays the legend at the right of the chart.
* * Custom: Displays the legend based on the given x and y values.
*
* @default 'Auto'
*/
position?: LegendPosition;
/**
* Mode of legend items.
* * Series: Legend items generated based on series count.
* * Point: Legend items generated based on unique data points.
* * Range: Legend items generated based on range color mapping property.
* * Gradient: Single linear bar generated based on range color mapping property.
* This property is applicable for chart component only.
*/
mode?: Chart3DLegendMode;
/**
* 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;
/**
* Legend in chart can be aligned as follows:
* * 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;
/**
* Options to customize the legend text.
*/
textStyle?: FontModel;
/**
* Shape height of the legend in pixels.
*
* @default 10
*/
shapeHeight?: number;
/**
* Shape width of the legend in pixels.
*
* @default 10
*/
shapeWidth?: number;
/**
* Options to customize the border of the legend.
*/
border?: BorderModel;
/**
* Options to customize left, right, top and bottom margins of the chart.
*/
margin?: MarginModel;
/**
* Options to customize left, right, top and bottom padding for legend container of the chart.
*/
containerPadding?: ContainerPaddingModel;
/**
* Padding between the legend shape and text.
*
* @default 8
*/
shapePadding?: number;
/**
* The background color of the legend that accepts value in hex and rgba as a valid CSS color string.
*
* @default 'transparent'
*/
background?: string;
/**
* Opacity of the legend.
*
* @default 1
*/
opacity?: number;
/**
* If set to true, series visibility collapses based on the legend visibility.
*
* @default true
*/
toggleVisibility?: boolean;
/**
* If set to true, the series get highlighted, while hovering the legend.
*
* @default false
*/
enableHighlight?: boolean;
/**
* Description for legends.
*
* @default null
*/
description?: string;
/**
* TabIndex value for the legend.
*
* @default 3
*/
tabIndex?: number;
/**
* Title for legends.
*
* @default null
*/
title?: string;
/**
* Options to customize the legend title.
*/
titleStyle?: FontModel;
/**
* legend title position.
*
* @default 'Top'
*/
titlePosition?: LegendTitlePosition;
/**
* Defines the text wrap behavior to employ when the individual legend text overflows
* * `Normal` - Specifies to break words only at allowed break points.
* * `Wrap` - Specifies to break a word once it is too long to fit on a line by itself.
* * `AnyWhere` - Specifies to break a word at any point if there are no otherwise-acceptable break points in the line.
*
* @default 'Normal'
*/
textWrap?: TextWrap;
/**
* Defines the text overflow behavior to employ when the individual legend text overflows
* * `Clip` - Specifies the text is clipped and not accessible.
* * `Ellipsis` - Specifies an ellipsis (“...”) to the clipped text.
*
* @default 'Ellipsis'
*/
textOverflow?: LabelOverflow;
/**
* maximum width for the legend title.
*
* @default 100
*/
maximumTitleWidth?: number;
/**
* Maximum label width for the legend text.
*
* @default null
*/
maximumLabelWidth?: number;
/**
* If set to true, legend will be visible using pages.
*
* @default true
*/
enablePages?: boolean;
/**
* If `isInversed` set to true, then it inverses legend item content (image and text).
*
* @default false.
*/
isInversed?: boolean;
/**
* If `reverse` is set to true, it reverses the order of legend items.
*
* @default false
*/
reverse?: boolean;
}
/**
* Interface for a class Legend3D
*/
export interface Legend3DModel {
}