Skip to content

D3 chart principles

Plot

Root element for all charts.

js
import { Plot } from '@semcore/ui/d3-chart';
import { Plot } from '@semcore/ui/d3-chart';

PlotProps

& & {...}
NameTypeDescription
widthnumberWidth of the svg element
heightnumberHeight of the svg element
labelstringHuman 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`
dataHintsOptional container for data hints (use it if you have a legend component upper in tree)
a11yAltTextConfigOptional prop to tune up alt text generating for charts
eventEmitterunknown

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

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" | numberThe position of the axis relative chart
hidebooleanElement hide property
ticksany[]Values for axis ticks

YAxisProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" | numberThe position of the axis relative chart
hidebooleanElement hide property
ticksany[]Values for axis ticks

AxisTitleProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left"The position of the axis relative chart
verticalWritingModebooleanFor vertical titles disables characters rotation while puts characters into the vertical column for better reading in some languages.

AxisTicksProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left"The position of the axis relative chart
hidebooleanElement hide property
ticksany[]Values for axis ticks

AxisGridProps

& {...}
NameTypeDescription
ticksany[]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

& {...}
NameTypeDescription
aspectnumberRelation between height and width dimensions block
onResize(size: [number, number], entries: []) => voidCallback 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

& {...}
NameTypeDescription
xstringField name from `data` array item for the XAxis
ystringField 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

& {...}
NameTypeDescription
xstringField name from `data` array item for the XAxis
ystringField name from `data` array item for the YAxis

Released under the MIT License.

Released under the MIT License.