@manta-eu/react/chart

Type Aliases

AreaChartProps

AreaChartProps = object

Properties

data

data: AreaChartData

---

BarChartProps

BarChartProps = object

Properties

data

data: BarChartData

---

ChartConfig

ChartConfig = { [k in string]: { icon?: ComponentType; label?: ReactNode } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof themes, string> }) }

---

ChartContainerProps

ChartContainerProps = ComponentProps<"div"> & object

Type Declaration

children

children: ComponentProps<typeof ResponsiveContainer>["children"]

config

config: ChartConfig

---

ChartFrameProps

ChartFrameProps = object

Properties

children

children: ReactElement

className?

optional className?: string

config

config: ChartConfig

height?

optional height?: number

title?

optional title?: string

---

ChartLegendContentProps

ChartLegendContentProps = ComponentProps<"div"> & Pick<LegendProps, "payload" | "verticalAlign"> & object

Type Declaration

hideIcon?

optional hideIcon?: boolean

nameKey?

optional nameKey?: string

---

ChartStyleProps

ChartStyleProps = object

Properties

config

config: ChartConfig

id

id: string

---

CHartToolTipContentProps

CHartToolTipContentProps = ComponentProps<typeof Tooltip> & ComponentProps<"div"> & object

Type Declaration

hideIndicator?

optional hideIndicator?: boolean

hideLabel?

optional hideLabel?: boolean

indicator?

optional indicator?: "line" | "dot" | "dashed"

labelKey?

optional labelKey?: string

nameKey?

optional nameKey?: string

---

ComposedChartProps

ComposedChartProps = object

Properties

data

data: ComposedChartData

---

ForecastBetween

ForecastBetween = object

Properties

from

from: string

label

label: string

to

to: string

---

ForecastChartProps

ForecastChartProps = object

Properties

between?

optional between?: ForecastBetween[]

A faint fill between two metrics, such as profit between revenue and costs.

changeLabel?

optional changeLabel?: string

Follows the signed gap in the hover card: “+$2,664 with the plans”.

className?

optional className?: string

data

data: Record<string, unknown>[]

One row per x value; each row carries x and a number per metric key.

events?

optional events?: ForecastEvent[]

formatDetail?

optional formatDetail?: (value) => string

Formats the figures in the hover card.

Parameters

value

number

Returns

string

formatValue?

optional formatValue?: (value) => string

Formats axis ticks.

Parameters

value

number

Returns

string

gainLabel?

optional gainLabel?: string

Legend name of the shading between a metric and its withoutPlans line.

goal?

optional goal?: object

label

label: string

value

value: number

height?

optional height?: number

legendLabels?

optional legendLabels?: object

Legend names of the solid and dotted parts of a single metric.

historic?

optional historic?: string

projected?

optional projected?: string

metrics

metrics: ForecastMetric[]

onEventSelect?

optional onEventSelect?: (event) => void

Called when an event’s dot or its card link is chosen; without it, an event’s href is a plain link.

Parameters

event

ForecastEvent

Returns

void

planShares?

optional planShares?: ForecastPlanShare[]

The plans behind each projected point of a metric, shown in its hover card (the first two).

projectedLabel?

optional projectedLabel?: string

title?

optional title?: string

today?

optional today?: string | number

The x value of Today: lines are solid up to it and dotted after. Omit it for a history-only chart.

todayLabel?

optional todayLabel?: string

The tag on the Today line.

---

ForecastEvent

ForecastEvent = object

An action already applied (a filled dot) or a plan waiting for approval (a hollow dot), on a metric’s line.

Properties

href?

optional href?: string

Rendered as a plain link in the card (and on the dot when the chart has no onEventSelect).

label?

optional label?: string

The small line above the title; defaults to “Applied” or “Waiting for your approval”.

linkLabel?

optional linkLabel?: string

metric

metric: string

status

status: "applied" | "waiting"

title

title: string

value?

optional value?: string

valueNote?

optional valueNote?: string

x

x: string | number

---

ForecastMetric

ForecastMetric = object

Properties

color?

optional color?: string

key

key: string

label

label: string

lowerIsBetter?

optional lowerIsBetter?: boolean

For costs: a drop with the plans shows as a gain in the hover card.

withoutPlans?

optional withoutPlans?: object

The same metric if the plans are not approved; the gap between the two is shaded as what the plans add.

key

key: string

label

label: string

---

ForecastPlanShare

ForecastPlanShare = object

The plans behind one metric’s projected value at one point, as the chart’s data carries them.

Properties

metric

metric: string

plans

plans: ForecastPointPlan[]

x

x: string | number

---

ForecastPointPlan

ForecastPointPlan = object

Properties

label

label: string

value

value: number

---

LineChartProps

LineChartProps = object

Properties

data

data: LineChartData

---

PieChartProps

PieChartProps = object

Properties

data

data: PieChartData

---

RadarChartProps

RadarChartProps = object

Properties

data

data: RadarChartData

---

ScatterChartProps

ScatterChartProps = object

Properties

data

data: ScatterChartData

---

Selector

Selector = string

---

Theme

Theme = "light" | "dark"

Variables

ChartLegend

const ChartLegend: typeof Legend = Legend

---

ChartTooltip

const ChartTooltip: typeof Tooltip = Tooltip

---

themes

const themes: Record<Theme, Selector>

Functions

AreaChart()

AreaChart(props): Element

Parameters

props

AreaChartProps

Returns

Element

---

BarChart()

BarChart(props): Element

Parameters

props

BarChartProps

Returns

Element

---

chartColorAt()

chartColorAt(index): string

Parameters

index

number

Returns

string

---

ChartContainer()

ChartContainer(props): Element

Parameters

props

ChartContainerProps

Returns

Element

---

ChartFrame()

ChartFrame(props): Element

Parameters

props

ChartFrameProps

Returns

Element

---

ChartLegendContent()

ChartLegendContent(props): Element | null

Parameters

props

ChartLegendContentProps

Returns

Element | null

---

ChartStyle()

ChartStyle(props): Element | null

Parameters

props

ChartStyleProps

Returns

Element | null

---

ChartTooltipContent()

ChartTooltipContent(props): Element | null

Parameters

props

CHartToolTipContentProps

Returns

Element | null

---

ComposedChart()

ComposedChart(props): Element

Parameters

props

ComposedChartProps

Returns

Element

---

ForecastChart()

ForecastChart(props): Element

Parameters

props

ForecastChartProps

Returns

Element

---

LineChart()

LineChart(props): Element

Parameters

props

LineChartProps

Returns

Element

---

PieChart()

PieChart(props): Element

Parameters

props

PieChartProps

Returns

Element

---

RadarChart()

RadarChart(props): Element

Parameters

props

RadarChartProps

Returns

Element

---

ScatterChart()

ScatterChart(props): Element

Parameters

props

ScatterChartProps

Returns

Element