Skip to content

D3 chart

Plot

Root element for all charts.

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

PlotProps

& & {...}
NameTypeDescription
widthnumber Width of the svg element
heightnumber Height of the svg element
labelstring 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
eventEmitterInstanceType<typeof PlotEventEmitter>

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>;

XAxisProps

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

YAxisProps

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

AxisTitleProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" The position of the axis relative chart
verticalWritingModeboolean For 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
hideboolean Element 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';

ResponsiveContainerProps

& {...}
NameTypeDescription
aspectnumber 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';

HoverProps

& {...}
NameTypeDescription
xstring Field name from `data` array item for the XAxis
ystring 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';

HoverProps

& {...}
NameTypeDescription
xstring Field name from `data` array item for the XAxis
ystring 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;
  };
};

Pattern

NameTypeDescription
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
dasharraystring SVG stroke-dasharray property that defines line chart lines dash pattern

ReferenceLine

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

ReferenceLineProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" The position of the title relative reference line
valueany Value element of data
titlestring

ReferenceLineTitleProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" The position of the axis relative reference line
valueany Value element of data

ReferenceBackgroundProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" The position relative the `value`
valueany Value element of data
endValuenumber | string Value of the background end

ReferenceStripesProps

& {...}
NameTypeDescription
position"top" | "right" | "bottom" | "left" The position relative the `value`
valueany Value element of data
endValuenumber | string Value of the background end

Last updated:

Released under the MIT License.

Released under the MIT License.