Developer D3 chart
For all common D3 chart properties, refer to D3 chart API.
Chart.Bar
js
import { Chart } from 'intergalactic/d3-chart';import { Chart } from 'intergalactic/d3-chart';BarChartProps
BaseChartProps<> & {...}| Name | Type | Description |
|---|---|---|
| groupKey | string | |
| xScale | ScaleBand<any> | ScaleTime<any, any> | |
| yScale | ScaleLinear<any, any> | |
| type | "stack" | "group" | |
| trend | Record<, []> | |
| 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 'intergalactic/d3-chart';import { Bar } from 'intergalactic/d3-chart';BarProps
& {...}| 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 |
| color | string | Line color |
| hide | boolean | Element hide property |
| duration | number | Animation duration in ms |
| r | number | number[] | Radius of curvature |
| hMin | number | Minimal height |
| onClick | (data: {[key: string]:string | number | }, event: React.SyntheticEvent, barIndex: number, barKey: string) => void | Bar click handler |
| transparent | boolean | Enables element transparency |
| maxBarSize | number | The maximum width of each Bar |
| patterns | Enables charts patterns that enhances charts accessibility |