<dy-line-chart>
A component for creating line charts to visualize data trends over time or sequences. It supports multiple series, customizable styles, and interactive features like tooltips and hover effects.
Example
Loading...
<dy-line-chart
style=${"width: 100%;"}
.series=${ [ "Series 1", "Series 2", "Series 3", "Series 4", "Series 5", "Series 6", "Series 7", "Series 8" ] }
.sequences=${ [ { "label": "Label", "values": [100,90,60,24,68,64,21,87] } ] }></dy-line-chart>
API
DuoyunLineChartElement
Extends DuoyunBarChartElement
DuoyunBarChartElement
Extends DuoyunChartBaseElement
DuoyunBarChartElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
series |
Yes | string[] |
gutter |
Yes | number |
stack |
Yes | boolean |
sequences |
Yes | Sequence[] |
xAxi |
{ formatter: (v: number | null) => string; } |
|
onMouseMove |
(index: number, evt: MouseEvent, sort: boolean, seqIndex?: number) => void |
|
onMouseOut |
() => void |
DuoyunChartBaseElement
Shadow DOM; Extends DuoyunResizeBaseElement
DuoyunChartBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
aspectRatio |
Yes | number |
filters |
Yes | string[] |
colors |
Yes | ``#${string}[] |
xAxi |
Yes | Axi | null |
yAxi |
Yes | Axi | null |
pAxi |
Yes | Axi | null |
yMin |
Yes | number |
yMax |
Yes | number |
xStep |
Yes | number |
yStep |
Yes | number |
pStep |
Yes | number |
tooltip |
Yes | Tooltip |
markLines |
Yes | MarkLine[] |
indexclick |
Emitter<number> |
|
genGradientId |
(index: number) => string |
DuoyunChartBaseElement Other
| Type | Value |
|---|---|
| Event | indexclick |
| Part | chart |
| CSS State | loading, no-data |
TapResizeBaseElement
Extends GemElement
TapResizeBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
resize |
Emitter<ResizeDetail> |
|
resizeThrottle |
Yes | boolean |
borderBoxSize |
{ blockSize: number; inlineSize: number; } |
|
contentRect |
{ x: number; y: number; height: number; width: number; } |
TapResizeBaseElement Other
| Type | Value |
|---|---|
| Event | resize |