# @umriss-ui/charts > React canvas chart library for data-dense dashboards - line, area, bar, box plot, scatter, control and Pareto charts. Few chart kinds, drawn well, fast. Version 0.12.0. Install with `npm install @umriss-ui/charts`. Each link below leads to that page as Markdown. Every page below in full - its examples' source, its props tables generated from the code, and what it deliberately does not do - stands in one file: [llms-full.txt](https://romanhaendler.github.io/umriss-ui/charts/llms-full.txt). The npm package carries the same text for the installed version as `docs/llms-full.md`; prefer that one when the package is installed. ## Scenarios Composed, realistic screens built from the package. - [Watch latency against its objective](https://romanhaendler.github.io/umriss-ui/charts/index.md): An on-call engineer keeps this dashboard open: every service's latency against its own objective, and the one that breached it in detail. - [See where the vans stand idle](https://romanhaendler.github.io/umriss-ui/charts/index.md): A fleet dispatcher checks mid-morning what every vehicle has done since loading, and which ones stand still more than they drive. - [Compare the budget with the forecast](https://romanhaendler.github.io/umriss-ui/charts/index.md): A controller prepares the monthly review: where the year will land against its budget, cost centre by cost centre, and why. - [Follow the sprint's burn-down](https://romanhaendler.github.io/umriss-ui/charts/index.md): A team lead opens this at the stand-up: how many hours of the sprint are left, how that compares with an even pace, and who holds them. - [Hold the tile length in control](https://romanhaendler.github.io/umriss-ui/charts/index.md): A quality engineer at the tile works reviews the early shift: whether the fired tiles kept their length, and what the kiln did when they did not. ## Getting started What to know before the first chart. - [Installation](https://romanhaendler.github.io/umriss-ui/charts/installation.md): Install the package, draw a first chart and size it in its container. Read this once before the component pages; everything after it assumes it. ## Chart The container and its axes: what is drawn on, and what the drawing is measured against. - [Chart](https://romanhaendler.github.io/umriss-ui/charts/chart.md): Holds the rows and draws the series on shared axes, one chart for every kind a screen needs (a plot, a graph). Reach for it whenever values are read over time or across categories. - [Axis](https://romanhaendler.github.io/umriss-ui/charts/axis.md): What a value is measured against: extent, ticks and labels, several axes per side, time on the local clock, and a working-time axis that leaves out the hours nobody works (a scale). - [Zoom and pan](https://romanhaendler.github.io/umriss-ui/charts/zoom-and-pan.md): Look closer at a stretch of a long series and move along it (zoom, pan, a viewport), by wheel, pinch, drag or key, and keep several charts on the same stretch. - [View](https://romanhaendler.github.io/umriss-ui/charts/view.md): How a reader is looking at a chart - the span in view and the hidden series - kept by the chart, reported whole, and handed back to restore it (saved state, a bookmark, a reload). ## Series The kinds a chart can draw. They share the axes and mix freely; the order in the JSX decides what lies over what. - [Line](https://romanhaendler.github.io/umriss-ui/charts/line.md): Joins the readings of a series into a course (a line chart, a trend). Reach for it for anything measured over time: latency, a balance, hours left. - [Area](https://romanhaendler.github.io/umriss-ui/charts/area.md): A filled course (an area chart): down to zero for a quantity, between two edges for a range, stacked for parts of a whole. - [Bar](https://romanhaendler.github.io/umriss-ui/charts/bar.md): Bars on the numeric x axis (a bar or column chart): one per category, grouped side by side, stacked, or as shares of a whole. - [Scatter](https://romanhaendler.github.io/umriss-ui/charts/scatter.md): Single readings as points, joined by nothing (a scatter plot, dots). Reach for it for samples, checks and events - anything that is not a course. - [BoxPlot](https://romanhaendler.github.io/umriss-ui/charts/boxplot.md): A distribution per position (a box plot, box-and-whisker): quartiles, median and whiskers, per service, per group or per hour. Reach for it to compare spreads, not single values. - [StateBand](https://romanhaendler.github.io/umriss-ui/charts/stateband.md): What something was doing over time, as a band of coloured segments (a status timeline, a state chart). Reach for it for a vehicle, a service or a device. - [Matrix](https://romanhaendler.github.io/umriss-ui/charts/matrix.md): One value per cell across two axes (a heatmap), coloured by its limits or along a gradient. Reach for it to see whether a bad hour hits everyone or one row. ## Limits and alarms A value read against its limits, and a process against its own behaviour. - [LimitLine](https://romanhaendler.github.io/umriss-ui/charts/limitline.md): The limits a course is read against (a threshold, a reference line): a line above the series, a band beneath them. Reach for it for objectives, budgets and alert levels. - [ControlChart](https://romanhaendler.github.io/umriss-ui/charts/controlchart.md): Centre line, control limits and the rule violations of a process (an SPC or Shewhart chart). Reach for it to see a process drift before it leaves its specification. - [Pareto](https://romanhaendler.github.io/umriss-ui/charts/pareto.md): Causes sorted by weight with a cumulative line (a Pareto chart). Reach for it after a bad week, to see which few causes make most of the trouble. ## Around the chart What stands beside the series: what a hover says, what the colours mean, and what the whole thing costs. - [Tooltip](https://romanhaendler.github.io/umriss-ui/charts/tooltip.md): What a hover reports (a hover card), and the values as a table for a reader who wants them all at once. - [Legend](https://romanhaendler.github.io/umriss-ui/charts/legend.md): What the colours mean (a key), and a switch for every series: a click hides it and shows it again, a double click shows only it (a solo). - [Benchmark](https://romanhaendler.github.io/umriss-ui/charts/benchmark.md): Millions of points, measured in this browser rather than claimed: the time to prepare and draw them, and the frame rate while the pointer moves. ## API index Every name the package exports, in one place. - [API index](https://romanhaendler.github.io/umriss-ui/charts/api.md): Everything `@umriss-ui/charts` exports, with its signature. A component's props stand on its own page.