API Reference
Common configuration, custom widget patterns, and context interaction patterns shared across all chart types.
AG Style Config
Colors
| Property | Type | Default | Description |
|---|---|---|---|
| colors.fills | string[] | AG_FILLS | Array of fill colors for chart series. |
| colors.strokes | string[] | AG_STROKES | Array of stroke colors for chart series. |
Background
| Property | Type | Default | Description |
|---|---|---|---|
| background | string | "white" | Chart background color. |
Font
| Property | Type | Default | Description |
|---|---|---|---|
| font.family | string | "Verdana, sans-serif" | Default font family for all text elements. |
| font.size | number | 13 | Default font size in pixels. |
Title
| Property | Type | Default | Description |
|---|---|---|---|
| title.text | string | "" | Title text content. |
| title.visible | boolean | true | Whether the title is visible. |
| title.color | string | "#181d1f" | Title text color. |
| title.fontSize | number | 18 | Title font size in pixels. |
| title.fontFamily | string | undefined | Title font family. Falls back to font.family if not set. |
| title.fontWeight | string | "bold" | Title font weight. |
| title.position | "top" | "bottom" | "top" | Position of the title relative to the chart. |
| title.alignment | "start" | "center" | "end" | "start" | Horizontal alignment of the title. |
Subtitle
| Property | Type | Default | Description |
|---|---|---|---|
| subtitle.visible | boolean | false | Whether the subtitle is visible. |
| subtitle.text | string | "" | Subtitle text content. |
| subtitle.color | string | "#8d949a" | Subtitle text color. |
| subtitle.fontSize | number | 14 | Subtitle font size in pixels. |
| subtitle.fontFamily | string | undefined | Subtitle font family. |
| subtitle.fontWeight | string | undefined | Subtitle font weight. |
Legend
| Property | Type | Default | Description |
|---|---|---|---|
| legend.visible | boolean | true | Whether the legend is visible. |
| legend.position | "top" | "bottom" | "right" | "right-top" | "right-center" | "right-bottom" | "bottom" | Position of the legend relative to the chart. |
| legend.gap | number | 16 | Gap between legend items in pixels. |
| legend.color | string | "#585858" | Legend text color. |
Axis
| Property | Type | Default | Description |
|---|---|---|---|
| axis.color | string | "#8a8c8c" | Axis line color. |
| axis.thickness | number | 1 | Axis line thickness in pixels. |
| axis.label.color | string | "#585858" | Axis label text color. |
| axis.label.fontSize | number | 13 | Axis label font size. |
| axis.label.gap | number | 11 | Gap between axis labels and the axis line. |
| axis.label.format | (name: string, index: number, axis: "x" | "y") => string | (name) => name | Formatter function for axis labels. |
| axis.tick.enabled | boolean | false | Whether axis ticks are enabled. |
| axis.tick.size | number | 6 | Size of axis ticks in pixels. |
| axis.xLine.visible | boolean | true | Whether the x-axis line is visible. |
| axis.yLine.visible | boolean | true | Whether the y-axis line is visible. |
Grid
| Property | Type | Default | Description |
|---|---|---|---|
| grid.color | string | "#e2e2e2" | Grid line color. |
| grid.thickness | number | 1 | Grid line thickness in pixels. |
| grid.dash | number[] | [] | Dash pattern for grid lines. |
| grid.xLine.visible | boolean | false | Whether vertical grid lines are visible. |
| grid.yLine.visible | boolean | true | Whether horizontal grid lines are visible. |
Padding
| Property | Type | Default | Description |
|---|---|---|---|
| padding.top | number | 20 | Top padding in pixels. |
| padding.right | number | 20 | Right padding in pixels. |
| padding.bottom | number | 20 | Bottom padding in pixels. |
| padding.left | number | 20 | Left padding in pixels. |
Tooltip
| Property | Type | Default | Description |
|---|---|---|---|
| tooltip.enabled | boolean | true | Whether tooltips are enabled. |
| tooltip.backgroundColor | string | "white" | Tooltip background color. |
| tooltip.textColor | string | "#181d1f" | Tooltip text color. |
| tooltip.borderColor | string | "#e2e2e2" | Tooltip border color. |
| tooltip.borderRadius | number | 4 | Tooltip border radius in pixels. |
| tooltip.padding | number | 12 | Tooltip padding in pixels. |
Toast Style Config
Colors
| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | TOAST_COLORS | Array of colors for chart series. |
Font
| Property | Type | Default | Description |
|---|---|---|---|
| font.family | string | "Arial" | Default font family for all text elements. |
| font.size | number | 11 | Default font size in pixels. |
Title
| Property | Type | Default | Description |
|---|---|---|---|
| title.text | string | "" | Title text content. |
| title.visible | boolean | true | Whether the title is visible. |
| title.color | string | "#333333" | Title text color. |
| title.fontSize | number | 18 | Title font size in pixels. |
| title.fontFamily | string | undefined | Title font family. Falls back to font.family if not set. |
| title.fontWeight | string | "bold" | Title font weight. |
| title.position | "top" | "bottom" | "top" | Position of the title relative to the chart. |
| title.alignment | "start" | "center" | "end" | "start" | Horizontal alignment of the title. |
Legend
| Property | Type | Default | Description |
|---|---|---|---|
| legend.visible | boolean | true | Whether the legend is visible. |
| legend.position | "top" | "bottom" | "right" | "right-top" | "right-center" | "right-bottom" | "bottom" | Position of the legend relative to the chart. |
| legend.gap | number | 12 | Gap between legend items in pixels. |
Axis
| Property | Type | Default | Description |
|---|---|---|---|
| axis.color | string | "#333333" | Axis line color. |
| axis.thickness | number | 1 | Axis line thickness in pixels. |
| axis.label.color | string | "#333333" | Axis label text color. |
| axis.label.fontSize | number | 11 | Axis label font size. |
| axis.label.gap | number | 8 | Gap between axis labels and the axis line. |
| axis.label.format | (name: string, index: number, axis: "x" | "y") => string | (name) => name | Formatter function for axis labels. |
| axis.tick.size | number | 6 | Size of axis ticks in pixels. |
Grid
| Property | Type | Default | Description |
|---|---|---|---|
| grid.color | string | "rgba(0, 0, 0, 0.05)" | Grid line color. |
| grid.thickness | number | 1 | Grid line thickness in pixels. |
Padding
| Property | Type | Default | Description |
|---|---|---|---|
| padding.top | number | 20 | Top padding in pixels. |
| padding.right | number | 20 | Right padding in pixels. |
| padding.bottom | number | 20 | Bottom padding in pixels. |
| padding.left | number | 20 | Left padding in pixels. |
Animation
| Property | Type | Default | Description |
|---|---|---|---|
| animation.enabled | boolean | true | Whether animations are enabled. |
| animation.duration | number | 300 | Animation duration in milliseconds. |
| animation.staggerDelay | number | 60 | Stagger delay between animated elements in milliseconds. |
Tooltip
| Property | Type | Default | Description |
|---|---|---|---|
| tooltip.enabled | boolean | true | Whether tooltips are enabled. |
| tooltip.backgroundColor | string | "rgba(50,50,50,0.6)" | Tooltip background color. |
| tooltip.textColor | string | "white" | Tooltip text color. |
| tooltip.borderRadius | number | 4 | Tooltip border radius in pixels. |
| tooltip.padding | number | 14 | Tooltip padding in pixels. |
Custom Part Example
import { ToastBarChart } from "@/components/flitter/charts/toast-bar-chart";
// Override any custom part by passing a function
<ToastBarChart
data={data}
config={{
...config,
bar: { gap: 4, cornerRadius: 6 },
}}
custom={{
bar: (args, context) => {
// Return a custom Widget for each bar
return Container({
decoration: new BoxDecoration({
color: args.isHovered ? "red" : context.config.colors[0],
borderRadius: BorderRadius.circular(args.isHovered ? 8 : 4),
}),
});
},
}}
/>