<dy-area-chart>
Area charts are used to represent quantitative variations over a period of time. They are similar to line charts but with the area below the line filled in with color. This can be useful for showing cumulative totals or emphasizing volume.
Example
Loading...
<dy-area-chart
style=${"width: 100%;"}
.fill=${true}
.aspectRatio=${4}
.smooth=${true}
.chartZoom=${true}
.yMax=${10}
.xAxi=${{"formatter": (value) => value.toFixed(2)}}
.yAxi=${{"formatter": (value) => value.toFixed(1)}}
@zoom=${(e) => e.target.range = e.detail}
.sequences=${ [ { "label": "Label", "values": [ [10,3], [15,3], [20,5], [25,4], [30,8], [35,5], [40,4], [45,5], [50,1], [55,3], [60,8], [65,5], [70,6] ] } ] }></dy-area-chart>
API
DuoyunAreaChartElement
Extends DuoyunChartBaseElement
DuoyunAreaChartElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
fill |
Yes | boolean |
|
stroke |
Yes | boolean |
|
stack |
Yes | boolean |
|
symbol |
Yes | boolean |
|
symbolRender |
Yes | ({ point, color, isHover, chart }: SymbolRenderOptions) => TemplateResult |
|
chartzoom |
Yes | boolean |
@deprecated |
chartZoom |
Yes | boolean |
|
range |
Yes | number[] |
|
smooth |
Yes | boolean |
|
gradient |
Yes | boolean |
|
sequences |
Yes | Sequence[] |
|
zoom |
Emitter |
DuoyunAreaChartElement Other
| Type | Value |
|---|---|
| Event | zoom |
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 |