Skip to content

Bar chart

D3 chart

For all common D3 chart properties, refer to D3 chart API.

Chart.Bar

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

BarChartProps

BaseChartProps<> & {...}
NameTypeDescription
groupKeystring
xScaleScaleBand<any> | ScaleTime<any, any>
yScaleScaleLinear<any, any>
type"stack" | "group"
trendRecord<, []>
onClickHoverRect(index: number, e: React.SyntheticEvent) => void Handle click by `HoverRect`. `index` is an index of the data array.
onClickBar(barItem: number, barKey: , e: React.SyntheticEvent) => void Handle click by Bar.

Bar

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

BarProps

& {...}
NameTypeDescription
xstring Field name from `data` array item for the XAxis
ystring Field name from `data` array item for the YAxis
colorstring Line color
hideboolean Element hide property
durationnumber Animation duration in ms
rnumber | number[] Radius of curvature
hMinnumber Minimal height
onClick(data: {[key: string]:string | number | }, event: React.SyntheticEvent, barIndex: number, barKey: string) => void Bar click handler
transparentboolean Enables element transparency
maxBarSizenumber The maximum width of each Bar
patterns Enables charts patterns that enhances charts accessibility
offset[number, number] | ((index: number) => [number, number]) Defines the x and y offset for positioning bars

Released under the MIT License.

Released under the MIT License.