Skip to content

Horizontal bar chart

D3 chart

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

Chart.Bar

For Horizontal view, you should pass true into invertAxis prop

js
import { Chart } from 'intergalactic/d3-chart';
import { Chart } from 'intergalactic/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.

HorizontalBar

Horizontal chart Bar.

js
import { HorizontalBar } from 'intergalactic/d3-chart';
import { HorizontalBar } from 'intergalactic/d3-chart';

HorizontalBarProps

& {...}
NameTypeDescription
xstring Field name from `data` array item for the XAxis
ystring Field name from `data` array item for the YAxis
colorstring Line color
durationnumber Animation duration in ms
rnumber | number[] Radius of curvature
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

GroupBar

It have children components Bar, HorizontalBar.

js
import { GroupBar } from 'intergalactic/d3-chart';

<GroupBar>
  <GroupBar.Bar />
  <GroupBar.HorizontalBar />
</GroupBar>;
import { GroupBar } from 'intergalactic/d3-chart';

<GroupBar>
  <GroupBar.Bar />
  <GroupBar.HorizontalBar />
</GroupBar>;

GroupBarProps

& {...}
NameTypeDescription
xstring Field name from `data` array item for the XAxis
ystring Field name from `data` array item for the YAxis
scaleGroupany Scale for group bars
maxBarSizenumber The maximum width of each Bar

Released under the MIT License.

Released under the MIT License.