Recharts compositions with Minecraft plot surfaces, glyphs and colors.
Preview
Example source could not be loaded: fps-example. Reload this page to retry.Usage
Use the runnable FPS and profiler recipes for native-style plots, or the metric example for application data. The existing chart showcase includes all maintained analytics examples and their matching source; this page documents installation and composition.
Composition
ChartContainer requires config and supplies ResponsiveContainer geometry plus color variables. Each config key defines color or a light/dark theme, not both. Put ChartTooltip/ChartTooltipContent and ChartLegend/ChartLegendContent inside that context. Pass actual data/dataKey values to Recharts 3 and give the chart an accessible name.
Profiler composition
Example source could not be loaded: profiler-example. Reload this page to retry.Application metrics
Example source could not be loaded: metric-example. Reload this page to retry.Interaction and limits
Container defaults to scale 2 and initialDimension 320 by 200. Tooltip supports dot/line/dashed indicators and nameKey/labelKey; Legend supports hideIcon. FPS/profiler fixed inputs have native reference coverage; responsive analytics, arbitrary labels, tooltip/legend arrangements and all eight analytics layouts are web adaptations. Keep a textual data summary for readers who cannot inspect the plot.
See the upstream API for the underlying part and event contracts.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import * as React from "react";
// oxlint-disable-next-line react-doctor/prefer-dynamic-import -- Preserve upstream synchronous Recharts exports, identity and initialization; a lazy component changes the public boundary.
import * as RechartsPrimitive from "recharts";
import type { TooltipValueType } from "recharts";
import { ChartGeometryProvider } from "./minecraft-chart-context";
import "./minecraft-chart.css";
// Preserve the original native painter initialization before later component imports.Interactive playground
View chart data
| Name | Desktop | Mobile |
|---|---|---|
| January | 186 | 80 |
| February | 305 | 200 |
| March | 237 | 120 |
| April | 73 | 190 |
| May | 209 | 130 |
| June | 214 | 140 |