# Charts

70 charts for React, React Native, SwiftUI and Jetpack Compose, each copied into your project with the CLI.

Source: https://ui.suiss.app/docs/charts

- [Area Chart Axes](https://ui.suiss.app/docs/charts/area-chart-axes): A gradient area with visible dots and a value axis on the right edge of the plot.
- [Area Chart Default](https://ui.suiss.app/docs/charts/area-chart-default): A single filled area with a smooth curve showing one series across six months.
- [Area Chart Gradient](https://ui.suiss.app/docs/charts/area-chart-gradient): Two overlapping areas whose fills fade out toward the bottom using SVG linear gradients.
- [Area Chart Interactive](https://ui.suiss.app/docs/charts/area-chart-interactive): A stock price chart with time-range toggles, a scrubbing cursor that updates the header, and animated transitions between ranges.
- [Area Chart Linear](https://ui.suiss.app/docs/charts/area-chart-linear): A single filled area whose points are joined by straight segments instead of a smoothed curve.
- [Area Chart Range](https://ui.suiss.app/docs/charts/area-chart-range): A heart-rate band showing each hour's low-to-high range as a shaded area with an average line through it.
- [Area Chart Sparkline](https://ui.suiss.app/docs/charts/area-chart-sparkline): A watchlist with a tiny gradient area chart beside each price, colored by whether the stock is rising or falling.
- [Area Chart Stacked Expand](https://ui.suiss.app/docs/charts/area-chart-stacked-expand): Two stacked areas normalized so every month fills 100%, showing each series' share rather than its value.
- [Area Chart Stacked](https://ui.suiss.app/docs/charts/area-chart-stacked): Two areas stacked on top of each other so the top edge shows the combined total, with a legend.
- [Area Chart Step](https://ui.suiss.app/docs/charts/area-chart-step): A single filled area drawn as steps, holding each value flat until the next reading.
- [Bar Chart Active](https://ui.suiss.app/docs/charts/bar-chart-active): A week of step counts where clicking a bar selects it, dims the others and updates the header.
- [Bar Chart Default](https://ui.suiss.app/docs/charts/bar-chart-default): A single series of rounded vertical bars, one per month.
- [Bar Chart Horizontal](https://ui.suiss.app/docs/charts/bar-chart-horizontal): Horizontal bars with category names on the left and a distinct color for each category.
- [Bar Chart Hourly](https://ui.suiss.app/docs/charts/bar-chart-hourly): Twenty-four thin bars of screen time per hour, with a dashed line marking the hourly average.
- [Bar Chart Interactive](https://ui.suiss.app/docs/charts/bar-chart-interactive): A screen-time report with stacked category bars, a week and day toggle, selectable days and a most-used apps list.
- [Bar Chart Labeled](https://ui.suiss.app/docs/charts/bar-chart-labeled): A single bar series with each value printed above its bar and no grid lines.
- [Bar Chart Multiple](https://ui.suiss.app/docs/charts/bar-chart-multiple): Two series drawn as grouped bars side by side for each month.
- [Bar Chart Negative](https://ui.suiss.app/docs/charts/bar-chart-negative): Monthly cash flow bars that turn green above zero and red below it, with a zero baseline.
- [Bar Chart Range](https://ui.suiss.app/docs/charts/bar-chart-range): A weather forecast where each horizontal pill spans the day's low and high on a shared gradient scale.
- [Bar Chart Stacked](https://ui.suiss.app/docs/charts/bar-chart-stacked): Two series stacked into one bar per month, with a legend below the plot.
- [Line Chart Default](https://ui.suiss.app/docs/charts/line-chart-default): A single smooth line through six months of values, without point markers.
- [Line Chart Dots](https://ui.suiss.app/docs/charts/line-chart-dots): A weight trend with a dot at every monthly reading and a fixed value axis on the right.
- [Line Chart Forecast](https://ui.suiss.app/docs/charts/line-chart-forecast): A solid line for actual values that continues as a dashed forecast over a shaded future range.
- [Line Chart Goal Dots](https://ui.suiss.app/docs/charts/line-chart-goal-dots): Nightly sleep hours with a goal line and dots colored green or orange depending on whether the goal was met.
- [Line Chart Goal](https://ui.suiss.app/docs/charts/line-chart-goal): Daily step counts plotted against a labeled dashed goal line at 10,000 steps.
- [Line Chart Interactive](https://ui.suiss.app/docs/charts/line-chart-interactive): Monthly temperatures for several cities, with chips to show or hide each city and an average, high or low switch.
- [Line Chart Labeled](https://ui.suiss.app/docs/charts/line-chart-labeled): A single line with a dot and a printed value at every point, and no grid.
- [Line Chart Linear](https://ui.suiss.app/docs/charts/line-chart-linear): A single line drawn with straight segments between readings instead of a smoothed curve.
- [Line Chart Multiple](https://ui.suiss.app/docs/charts/line-chart-multiple): Two lines compared on the same axes, with a legend identifying each series.
- [Line Chart Step](https://ui.suiss.app/docs/charts/line-chart-step): A single line drawn as horizontal steps, holding each value until the next reading.
- [Pie Chart Active](https://ui.suiss.app/docs/charts/pie-chart-active): A donut where one slice is enlarged and outlined with an outer arc to highlight it.
- [Pie Chart Default](https://ui.suiss.app/docs/charts/pie-chart-default): A full pie split into five device slices, separated by thin card-colored borders.
- [Pie Chart Donut Text](https://ui.suiss.app/docs/charts/pie-chart-donut-text): A donut with the total number of users displayed in the center of the ring.
- [Pie Chart Donut](https://ui.suiss.app/docs/charts/pie-chart-donut): A donut chart with a hollow center and small gaps between slices.
- [Pie Chart Half](https://ui.suiss.app/docs/charts/pie-chart-half): A semicircular gauge-style pie showing battery share by device, with a caption under the arc.
- [Pie Chart Interactive](https://ui.suiss.app/docs/charts/pie-chart-interactive): A storage breakdown donut with a device switch, hover-linked list and lifted slices, plus a linear usage bar.
- [Pie Chart Label](https://ui.suiss.app/docs/charts/pie-chart-label): A pie with each category name drawn outside its slice and joined by a leader line.
- [Pie Chart Legend](https://ui.suiss.app/docs/charts/pie-chart-legend): A donut with a legend beneath it that lists every category and its color.
- [Pie Chart Nested](https://ui.suiss.app/docs/charts/pie-chart-nested): Two concentric pies: an inner ring of grouped totals surrounded by an outer ring of individual categories.
- [Pie Chart Separated](https://ui.suiss.app/docs/charts/pie-chart-separated): A donut whose slices are pulled apart with wide gaps and rounded corners.
- [Radar Chart Default](https://ui.suiss.app/docs/charts/radar-chart-default): A single filled radar shape showing this month's scores across six training skills.
- [Radar Chart Dots](https://ui.suiss.app/docs/charts/radar-chart-dots): A single radar shape with a solid dot marking the value on every axis.
- [Radar Chart Grid Circle](https://ui.suiss.app/docs/charts/radar-chart-grid-circle): A single radar shape drawn over circular rings instead of polygonal grid lines.
- [Radar Chart Grid Filled](https://ui.suiss.app/docs/charts/radar-chart-grid-filled): A borderless radar shape over shaded circular rings separated by card-colored lines.
- [Radar Chart Grid None](https://ui.suiss.app/docs/charts/radar-chart-grid-none): A single solid radar shape with no grid and no outline, leaving only the shape and axis labels.
- [Radar Chart Interactive](https://ui.suiss.app/docs/charts/radar-chart-interactive): A phone model comparison where toggle chips show up to three models, which grow in and out of the radar.
- [Radar Chart Legend](https://ui.suiss.app/docs/charts/radar-chart-legend): Two overlapping radar shapes with a legend beneath that names each series.
- [Radar Chart Lines Only](https://ui.suiss.app/docs/charts/radar-chart-lines-only): Two radar outlines with no fill, comparing this month and last month by stroke alone.
- [Radar Chart Multiple](https://ui.suiss.app/docs/charts/radar-chart-multiple): Two overlapping radar shapes comparing this month with last month.
- [Radar Chart Radius Axis](https://ui.suiss.app/docs/charts/radar-chart-radius-axis): A single radar shape with a visible 0 to 100 value scale along the vertical axis.
- [Radial Chart Batteries](https://ui.suiss.app/docs/charts/radial-chart-batteries): A row of small battery rings, one per device, that turn red when charge is at or below 20%.
- [Radial Chart Default](https://ui.suiss.app/docs/charts/radial-chart-default): Concentric radial bars, one per device, each running around a gray background track.
- [Radial Chart Gauge](https://ui.suiss.app/docs/charts/radial-chart-gauge): A 240-degree gauge arc showing an air quality reading with its value and rating below the center.
- [Radial Chart Interactive](https://ui.suiss.app/docs/charts/radial-chart-interactive): A weekly activity view where picking a day animates three large rings and updates each ring's totals.
- [Radial Chart Label](https://ui.suiss.app/docs/charts/radial-chart-label): Concentric radial bars with each category's name printed at the start of its bar.
- [Radial Chart Progress](https://ui.suiss.app/docs/charts/radial-chart-progress): A three-quarter arc tracking progress toward a goal, with the count shown in the center.
- [Radial Chart Rings](https://ui.suiss.app/docs/charts/radial-chart-rings): Three nested activity rings for move, exercise and stand, drawn as plain SVG circles.
- [Radial Chart Stacked](https://ui.suiss.app/docs/charts/radial-chart-stacked): A half-circle arc with two series stacked end to end and the combined total beneath it.
- [Radial Chart Text](https://ui.suiss.app/docs/charts/radial-chart-text): A single full-circle progress ring with a percentage and caption centered inside.
- [Radial Chart Tinted](https://ui.suiss.app/docs/charts/radial-chart-tinted): Concentric radial bars whose unfilled track is a soft tint of each bar's own color.
- [Tooltip Chart Custom](https://ui.suiss.app/docs/charts/tooltip-chart-custom): A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.
- [Tooltip Chart Dashed](https://ui.suiss.app/docs/charts/tooltip-chart-dashed): A stacked bar chart whose tooltip marks each series with a dashed outline indicator.
- [Tooltip Chart Dot](https://ui.suiss.app/docs/charts/tooltip-chart-dot): A stacked bar chart showing the default tooltip indicator, a small colored square for each series.
- [Tooltip Chart Formatter](https://ui.suiss.app/docs/charts/tooltip-chart-formatter): A bar chart of daily active energy whose tooltip shows a name, value and kcal unit through a custom formatter.
- [Tooltip Chart Icons](https://ui.suiss.app/docs/charts/tooltip-chart-icons): A stacked bar chart whose tooltip shows an icon for each series in place of a color swatch.
- [Tooltip Chart Interactive](https://ui.suiss.app/docs/charts/tooltip-chart-interactive): A tooltip playground on quarterly revenue bars, with controls for indicator, trigger, title total and hidden parts.
- [Tooltip Chart Label Formatter](https://ui.suiss.app/docs/charts/tooltip-chart-label-formatter): A gradient area chart whose tooltip heading shows a longer date than the axis ticks.
- [Tooltip Chart Line](https://ui.suiss.app/docs/charts/tooltip-chart-line): A stacked bar chart whose tooltip marks each series with a thin vertical color bar.
- [Tooltip Chart No Indicator](https://ui.suiss.app/docs/charts/tooltip-chart-no-indicator): A stacked bar chart whose tooltip lists series names and values without color indicators.
- [Tooltip Chart No Label](https://ui.suiss.app/docs/charts/tooltip-chart-no-label): A stacked bar chart whose tooltip omits the category heading and shows only the series rows.