Developer Plot
Root element for all charts.
js
import { Plot } from '@semcore/ui/d3-chart';import { Plot } from '@semcore/ui/d3-chart';PlotProps
& & {...}| Name | Type | Description |
|---|---|---|
| width | number | Width of the svg element |
| height | number | Height of the svg element |
| label | string | Human readable chart name (e.g "Last market trends") |
| locale | ["language"] | Locale for displaying the days of a week and months, to be transferred to `Intl` |
| dataHints | Optional container for data hints (use it if you have a legend component upper in tree) | |
| a11yAltTextConfig | Optional prop to tune up alt text generating for charts | |
| eventEmitter | unknown |
Axis
It have children components Title, Ticks, Grid.
js
import { XAxis, YAxis } from '@semcore/ui/d3-chart';
<XAxis>
<XAxis.Title />
<XAxis.Ticks />
<XAxis.Grid />
</XAxis>;import { XAxis, YAxis } from '@semcore/ui/d3-chart';
<XAxis>
<XAxis.Title />
<XAxis.Ticks />
<XAxis.Grid />
</XAxis>;XAxisProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | number | The position of the axis relative chart |
| hide | boolean | Element hide property |
| ticks | any[] | Values for axis ticks |
YAxisProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | number | The position of the axis relative chart |
| hide | boolean | Element hide property |
| ticks | any[] | Values for axis ticks |
AxisTitleProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position of the axis relative chart |
| verticalWritingMode | boolean | For vertical titles disables characters rotation while puts characters into the vertical column for better reading in some languages. |
AxisTicksProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position of the axis relative chart |
| hide | boolean | Element hide property |
| ticks | any[] | Values for axis ticks |
AxisGridProps
& {...}| Name | Type | Description |
|---|---|---|
| ticks | any[] | Values for axis ticks |
ResponsiveContainer
Container watch to size block.
js
import { ResponsiveContainer } from '@semcore/ui/d3-chart';import { ResponsiveContainer } from '@semcore/ui/d3-chart';ResponsiveContainerProps
& {...}| Name | Type | Description |
|---|---|---|
| aspect | number | Relation between height and width dimensions block |
| onResize | (size: [number, number], entries: []) => void | Callback which will be called after changing the block size |
HoverLine
Component for show line after hover on chart.
js
import { HoverLine } from '@semcore/ui/d3-chart';import { HoverLine } from '@semcore/ui/d3-chart';HoverProps
& {...}| Name | Type | Description |
|---|---|---|
| x | string | Field name from `data` array item for the XAxis |
| y | string | Field name from `data` array item for the YAxis |
HoverRect
Component for show sector after hover on chart.
js
import { HoverRect } from '@semcore/ui/d3-chart';import { HoverRect } from '@semcore/ui/d3-chart';HoverProps
& {...}| Name | Type | Description |
|---|---|---|
| x | string | Field name from `data` array item for the XAxis |
| y | string | Field name from `data` array item for the YAxis |