Dashboard Chart Rendering#

Langfuse dashboards use a centralized, widget-based chart rendering system located in web/src/features/widgets/chart-library/. The entry point is a single <Chart> wrapper component that dispatches to the appropriate chart implementation based on a chartType prop of type DashboardWidgetChartType.

Supported Chart Types#

Nine chart types are defined in the DashboardWidgetChartType Prisma enum 1:

The <Chart> component's renderChart() switch dispatches to each of these 2. If data.length > 2000 and overrideWarning is not set, a large-dataset warning is shown instead of rendering 3.

Data Model#

All chart components share a common DataPoint interface and accept ChartProps:

• time_dimension – optional string; if ISO-formatted, <Chart> parses and localizes it to either a date string (midnight UTC) or a date-time string 4.
• dimension – optional string for categorical grouping (e.g., x-axis labels in bar charts).
• metric – a number or array of numbers.

The utility functions groupDataByTimeDimension() and getUniqueDimensions() (in utils.ts) are used by time-series charts to pivot the flat DataPoint[] into a Recharts-compatible grouped format, with each unique dimension value becoming a separate keyed series 5.

Time Series Chart Rendering#

LineChartTimeSeries is the canonical time-series implementation 6. Key behaviors:

• Color assignment per series: each unique dimension gets hsl(var(--chart-N)) where N = (index % 8) + 1, cycling through 8 CSS chart variables 7.
• Interactive legend (legendPosition="above"): clicking a legend entry highlights that series and dims others via highlightedDimension state 8.
• Data point dots: toggleable via showDataPointDots prop; dots are suppressed on muted series 9.
• Null handling: connectNulls is always enabled 10.

AreaChartTimeSeries and VerticalBarChartTimeSeries follow the same pattern with their respective Recharts primitives.

Categorical Bar Chart Rendering#

VerticalBarChart renders dimension-keyed bars using Recharts <BarChart> with dataKey="metric" 11. The fill color comes from the CSS variable --color-metric, resolved via the ChartContainer config. A subtleFill boolean prop reduces fillOpacity to 0.3 12.

HorizontalBarChart follows the same pattern with a transposed axis.

Color Assignment Strategies#

Three separate systems handle color assignment depending on context:

1. Widget chart library (CSS variables)

Inside chart-library components, series colors are assigned by index to the design-system's named CSS variables --chart-1 through --chart-8 . This makes colors automatically theme-aware (light/dark).

2. Legacy dashboard utility (getColorsForCategories)

For older dashboard cards (e.g., Tremor-based charts), getColorsForCategories maps a list of category strings to a predefined palette of 22 Tailwind color names (indigo, cyan, zinc, purple, …), cycling with random fallback if there are more categories than palette entries 14.

3. Score analytics (color-scales.ts)

The score analytics module uses a richer, perceptually uniform system via color-scales.ts:

• Heatmaps: OKLCH-space mono-color scales generated with generateMonoColorScale() using the 6 HEATMAP_BASE_COLORS anchors.
• Categorical scores: getScoreCategoryColors() generates OKLAB-mixed monochrome scales per score, sorting categories alphabetically first for stable, order-independent color assignment.
• Boolean scores: getScoreBooleanColors() produces a 2-step scale with True darker and False lighter.
• Numeric scores: getScoreNumericColor() returns the fully-saturated base color.
• buildColorMappings() is the top-level builder that assembles all of the above into a single Record<string, string> for use in multi-score comparison views, with namespaced keys to avoid collision when two scores share the same name from different sources.

Key Consumers#

• ChartScores – renders average numeric scores over time as a LINE_TIME_SERIES chart with legendPosition="above" and show_data_point_dots: false 15.
• CategoricalScoreChart – renders categorical score distributions as a VERTICAL_BAR chart with subtle_fill: true 16.

Files at a Glance#