UNPKG

igniteui-react-charts

Version:

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

102 lines (101 loc) 2.99 kB
import { UnknownValuePlotting_$type } from "igniteui-react-core"; import { IgrHorizontalAnchoredCategorySeries } from "./igr-horizontal-anchored-category-series"; import { LineSeries } from "./LineSeries"; import { ensureEnum } from "igniteui-react-core"; /** * Represents a IgxDataChartComponent line series. * Displays trend over time or ordered categories. * Useful when there are many data points and the order is important. * * `LineSeries` belongs to a group of `CategorySeries` and it is rendered using a collection of points connected by straight line segments. * * ```ts * <IgrDataChart * dataSource={this.data} > * <IgrCategoryXAxis name="xAxis" * label="Country" /> * <IgrNumericYAxis name="yAxis" * minimumValue={0} /> * <IgrLineSeries * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * valueMemberPath="Coal" /> * </IgrDataChart> * ``` * * ```ts * const series2 = new IgrLineSeries({ name: "series2" }); * series2.markerType = MarkerType.Circle; * series2.valueMemberPath = "RUS"; * series2.title = "Russia"; * series2.xAxisName = "xAxis"; * series2.yAxisName = "yAxis"; * series2.thickness = 2; * ``` */ export class IgrLineSeries extends IgrHorizontalAnchoredCategorySeries { createImplementation() { return new LineSeries(); } /** * @hidden */ get i() { return this._implementation; } constructor(props) { super(props); } /** * Gets whether the current series shows only line shapes. */ get isLineOnly() { return this.i.fn; } /** * Gets whether the current series shows an area or line shape. * * Gets whether the `Series` shows an area or a line shape. * * ```ts * let isAreaOrLine: boolean = series.isAreaOrLine; * ``` */ get isAreaOrLine() { return this.i.ey; } /** * Determines how unknown values will be plotted on the chart. * Null and Double.NaN are two examples of unknown values. * * Determines how unknown values will be plotted for the `Series`. This can be set to `LinearInterpolate` to create a continous shape or `DontPlot` to create breaks in the series. * * Null and Double.NaN are two examples of unknown values. * * ```ts * series.unknownValuePlotting = UnknownValuePlotting.LinearInterpolate; * ``` * * ```ts * <IgrDataChart * dataSource={this.data} > * <IgrCategoryXAxis name="xAxis" * label="Country" /> * <IgrNumericYAxis name="yAxis" * minimumValue={0} /> * <IgrLineSeries * name="series1" * xAxisName="xAxis" * yAxisName="yAxis" * valueMemberPath="Coal" * unknownValuePlotting:"LinearInterpolate"/> * ``` */ get unknownValuePlotting() { return this.i.unknownValuePlotting; } set unknownValuePlotting(v) { this.i.unknownValuePlotting = ensureEnum(UnknownValuePlotting_$type, v); } }