@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.
501 lines (428 loc) • 12.8 kB
TypeScript
import { Property, Complex, ChildProperty, Browser } from '@syncfusion/ej2-base';import { rotateTextSize, firstToLowerCase, isBreakLabel, getTitle } from '../../common/utils/helper';import { Size, Rect, measureText } from '@syncfusion/ej2-svg-base';import { DoubleRange } from '../utils/doubleRange';import { Chart3DSeries } from '../series/chart-series';import { Double3D } from '../axis/double-axis';import { DateTime3D } from '../axis/date-time-axis';import { Category3D } from '../axis/category-axis';import { DateTimeCategory3D } from '../axis/date-time-category-axis';import { ChartRangePadding, EdgeLabelPlacement, IntervalType, LabelIntersectAction, LabelPlacement, Orientation, SkeletonType, ValueType } from '../../common/utils/enum';import { axisRangeCalculated } from '../../common/model/constants';import { textWrap } from '../../common/utils/helper';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { Chart3D } from '../chart3D';import { Chart3DAxisRangeCalculatedEventArgs, Chart3DTextFont } from '../model/chart3d-Interface';import { VisibleRangeModel } from '../../common/model/interface';import { Chart3DTextFontModel } from '../model/chart3d-Interface-model';import { valueToCoefficients } from '../utils/chart3dRender';
/**
* Interface for a class Chart3DRow
*/
export interface Chart3DRowModel {
/**
* The height of the row as a string accept input both as '100px' and '100%'.
* If specified as '100%, row renders to the full height of its chart.
*
* @default '100%'
*/
height?: string;
}
/**
* Interface for a class Chart3DColumn
*/
export interface Chart3DColumnModel {
/**
* The width of the column as a string accepts input both as like '100px' or '100%'.
* If specified as '100%, column renders to the full width of its chart.
*
* @default '100%'
*/
width?: string;
}
/**
* Interface for a class Chart3DMajorGridLines
*/
export interface Chart3DMajorGridLinesModel {
/**
* The width of the line in pixels.
*
* @default 1
*/
width?: number;
/**
* The color of the major grid line that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
color?: string;
}
/**
* Interface for a class Chart3DMinorGridLines
*/
export interface Chart3DMinorGridLinesModel {
/**
* The width of the line in pixels.
*
* @default 0.7
*/
width?: number;
/**
* The color of the minor grid line that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
color?: string;
}
/**
* Interface for a class Chart3DMajorTickLines
*/
export interface Chart3DMajorTickLinesModel {
/**
* The width of the tick lines in pixels.
*
* @default 0
*/
width?: number;
/**
* The height of the ticks in pixels.
*
* @default 5
*/
height?: number;
/**
* The color of the major tick line that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
color?: string;
}
/**
* Interface for a class Chart3DMinorTickLines
*/
export interface Chart3DMinorTickLinesModel {
/**
* The width of the tick line in pixels.
*
* @default 0
*/
width?: number;
/**
* The height of the ticks in pixels.
*
* @default 5
*/
height?: number;
/**
* The color of the minor tick line that accepts value in hex and rgba as a valid CSS color string.
*
* @default null
*/
color?: string;
}
/**
* Interface for a class Chart3DAxis
*/
export interface Chart3DAxisModel {
/**
* Options to customize the axis label.
*/
labelStyle?: Chart3DTextFontModel;
/**
* Specifies the title of an axis.
*
* @default ''
*/
title?: string;
/**
* Options for customizing the axis title.
*/
titleStyle?: Chart3DTextFontModel;
/**
* Used to format the axis label that accepts any global string format like 'C', 'n1', 'P' etc.
* It also accepts placeholder like '{value}°C' in which value represent the axis label, e.g, 20°C.
*
* @default ''
*/
labelFormat?: string;
/**
* Specifies the skeleton format in which the dateTime format will process.
*
* @default ''
*/
skeleton?: string;
/**
* It specifies the type of format to be used in dateTime format process.
*
* @default 'DateTime'
*/
skeletonType?: SkeletonType;
/**
* Left and right padding for the plot area in pixels.
*
* @default 0
*/
plotOffset?: number;
/**
* Left padding for the plot area in pixels.
*
* @default null
*/
plotOffsetLeft?: number;
/**
* Top padding for the plot area in pixels.
*
* @default null
*/
plotOffsetTop?: number;
/**
* Right padding for the plot area in pixels.
*
* @default null
*/
plotOffsetRight?: number;
/**
* Bottom padding for the plot area in pixels.
*
* @default null
*/
plotOffsetBottom?: number;
/**
* Specifies indexed category axis.
*
* @default false
*/
isIndexed?: boolean;
/**
* The base value for logarithmic axis. It requires `valueType` to be `Logarithmic`.
*
* @default 10
*/
logBase?: number;
/**
* Specifies the index of the column where the axis is associated,
* when the chart area is divided into multiple plot areas by using `columns`.
* ```html
* <div id='Chart3D'></div>
* ```
* ```typescript
* let chart3D: Chart3D = new Chart3D({
* ...
* columns: [{ width: '50%' },
* { width: '50%' }],
* axes: [{
* name: 'xAxis 1',
* columnIndex: 1,
* }],
* ...
* });
* chart3D.appendTo('#Chart3D');
* ```
*
* @default 0
*/
columnIndex?: number;
/**
* Specifies the index of the row where the axis is associated, when the chart area is divided into multiple plot areas by using `rows`.
* ```html
* <div id='Chart3D'></div>
* ```
* ```typescript
* let chart3D: Chart3D = new Chart3D({
* ...
* rows: [{ height: '50%' },
* { height: '50%' }],
* axes: [{
* name: 'yAxis 1',
* rowIndex: 1,
* }],
* ...
* });
* chart3D.appendTo('#Chart3D');
* ```
*
* @default 0
*/
rowIndex?: number;
/**
* Specifies the number of `columns` or `rows` an axis has to span horizontally or vertically.
*
* @default 1
*/
span?: number;
/**
* With this property, you can request axis to calculate intervals approximately equal to your specified interval.
*
* @default null
* @aspDefaultValueIgnore
*/
desiredIntervals?: number;
/**
* The maximum number of label count per 100 pixels with respect to the axis length.
*
* @default 3
*/
maximumLabels?: number;
/**
* If set to true, the axis will render at the opposite side of its default position.
*
* @default false
*/
opposedPosition?: boolean;
/**
* Specifies the padding for the axis range in terms of interval.They are,
* * none: Padding cannot be applied to the axis.
* * normal: Padding is applied to the axis based on the range calculation.
* * additional: Interval of the axis is added as padding to the minimum and maximum values of the range.
* * round: Axis range is rounded to the nearest possible value divided by the interval.
*
* @default 'Auto'
*/
rangePadding?: ChartRangePadding;
/**
* Specifies the data types that the axis can handle:
* * Double: This type is used for rendering a numeric axis to accommodate numeric data.
* * DateTime: This type is utilized for rendering a date-time axis to manage date-time data.
* * Category: This type is employed for rendering a category axis to manage categorical data.
* * Logarithmic: This type is applied for rendering a logarithmic axis to handle a wide range of values.
* * DateTimeCategory: This type is used to render a date time category axis for managing business days.
*
* @default 'Double'
* @isEnumeration true
*/
valueType?: ValueType;
/**
* Specifies the position of labels at the edge of the axis.They are,
* * None: No action will be performed.
* * Hide: Edge label will be hidden.
* * Shift: Shifts the edge labels.
*
* @default 'None'
*/
edgeLabelPlacement?: EdgeLabelPlacement;
/**
* Specifies the types like `Years`, `Months`, `Days`, `Hours`, `Minutes`, `Seconds` in date time axis.They are,
* * Auto: Defines the interval of the axis based on data.
* * Years: Defines the interval of the axis in years.
* * Months: Defines the interval of the axis in months.
* * Days: Defines the interval of the axis in days.
* * Hours: Defines the interval of the axis in hours.
* * Minutes: Defines the interval of the axis in minutes.
*
* @default 'Auto'
*/
intervalType?: IntervalType;
/**
* Specifies the placement of a label for category axis. They are,
* * betweenTicks: Renders the label between the ticks.
* * onTicks: Renders the label on the ticks.
*
* @default 'OnTicks'
*/
labelPlacement?: LabelPlacement;
/**
* Unique identifier of an axis.
* To associate an axis with the series, set this name to the xAxisName/yAxisName properties of the series.
*
* @default ''
*/
name?: string;
/**
* If set to true, axis label will be visible.
*
* @default true
*/
visible?: boolean;
/**
* Specifies the number of minor ticks per interval.
*
* @default 0
*/
minorTicksPerInterval?: number;
/**
* The angle to which the axis label gets rotated.
*
* @default 0
*/
labelRotation?: number;
/**
* Defines an angle to rotate axis title. By default, angle auto calculated based on position and orientation of axis.
*
* @default null
*/
titleRotation?: number;
/**
* Specifies the minimum range of an axis.
*
* @default null
*/
minimum?: Object;
/**
* Specifies the maximum range of an axis.
*
* @default null
*/
maximum?: Object;
/**
* Specifies the interval for an axis.
*
* @default null
* @aspDefaultValueIgnore
*/
interval?: number;
/**
* Specifies the maximum width of an axis label.
*
* @default 34.
*/
maximumLabelWidth?: number;
/**
* Specifies the Trim property for an axis.
*
* @default false
*/
enableTrim?: boolean;
/**
* Specifies the labelPadding from axis.
*
* @default 5
*/
labelPadding?: number;
/**
* Specifies the titlePadding from axis label.
*
* @default 5
*/
titlePadding?: number;
/**
* Options for customizing major tick lines.
*/
majorTickLines?: Chart3DMajorTickLinesModel;
/**
* Options for customizing minor tick lines.
*/
minorTickLines?: Chart3DMinorTickLinesModel;
/**
* Options for customizing major grid lines.
*/
majorGridLines?: Chart3DMajorGridLinesModel;
/**
* Options for customizing minor grid lines.
*/
minorGridLines?: Chart3DMinorGridLinesModel;
/**
* Specifies the actions like `None`, `Hide`, `Trim`, `Wrap`, `MultipleRows`, `Rotate45`, and `Rotate90`
* when the axis labels intersect with each other.They are,
* * None: Shows all the labels.
* * Hide: Hides the label when it intersects.
* * Trim: Trim the label when it intersects.
* * Wrap: Wrap the label when it intersects.
* * MultipleRows: Shows the label in MultipleRows when it intersects.
* * Rotate45: Rotates the label to 45 degree when it intersects.
* * Rotate90: Rotates the label to 90 degree when it intersects.
*
* @default Trim
*/
labelIntersectAction?: LabelIntersectAction;
/**
* It specifies whether the axis to be rendered in inversed manner or not.
*
* @default false
*/
isInversed?: boolean;
/**
* It specifies whether the axis to be start from zero.
*
* @default true
*/
startFromZero?: boolean;
}
/**
* Interface for a class Visible3DLabels
* @private
*/
export interface Visible3DLabelsModel {
}