Plot

Root element for all charts.

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
patterns		Enables charts patterns that enhances charts accessibility
eventEmitter	InstanceType<typeof PlotEventEmitter>

Axis

It have children components Title, Ticks, Grid.

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.

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.

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.

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

Pattern fill

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

import { ReferenceLine } from '@semcore/ui/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