Developer Plot
Root element for all charts.
js
import { Plot } from 'intergalactic/d3-chart';import { Plot } from 'intergalactic/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 | |
| patterns | Enables charts patterns that enhances charts accessibility | |
| eventEmitter | InstanceType<typeof PlotEventEmitter> |
Axis
It have children components Title, Ticks, Grid.
js
import { XAxis, YAxis } from 'intergalactic/d3-chart';
<XAxis>
<XAxis.Title />
<XAxis.Ticks />
<XAxis.Grid />
</XAxis>;import { XAxis, YAxis } from 'intergalactic/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 'intergalactic/d3-chart';import { ResponsiveContainer } from 'intergalactic/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 'intergalactic/d3-chart';import { HoverLine } from 'intergalactic/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 'intergalactic/d3-chart';import { HoverRect } from 'intergalactic/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 |
Pattern fill
ts
type Pattern = {
fill: {
viewBox: string;
children: React.ReactNode;
};
symbol: {
viewBox: string;
size: [width: number, height: number];
children: React.ReactNode;
};
};type Pattern = {
fill: {
viewBox: string;
children: React.ReactNode;
};
symbol: {
viewBox: string;
size: [width: number, height: number];
children: React.ReactNode;
};
};Pattern
| Name | Type | Description |
|---|---|---|
| fill | {viewBox: string; children: React.ReactNode } | SVG jsx element and svg viewbox of the SVG pattern used to fill chart elements such bars or areas |
| symbol | {viewBox: string; size: [width: number, height: number]; children: React.ReactNode } | SVG jsx element, viewbox and render size of the single pattern image used on line dots or caps |
| dasharray | string | SVG stroke-dasharray property that defines line chart lines dash pattern |
ReferenceLine
js
import { ReferenceLine } from 'intergalactic/d3-chart';import { ReferenceLine } from 'intergalactic/d3-chart';ReferenceLineProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position of the title relative reference line |
| value | any | Value element of data |
| title | string |
ReferenceLineTitleProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position of the axis relative reference line |
| value | any | Value element of data |
ReferenceBackgroundProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position relative the `value` |
| value | any | Value element of data |
| endValue | number | string | Value of the background end |
ReferenceStripesProps
& {...}| Name | Type | Description |
|---|---|---|
| position | "top" | "right" | "bottom" | "left" | The position relative the `value` |
| value | any | Value element of data |
| endValue | number | string | Value of the background end |