Chart
A beautiful, composable, responsive charting container wrapper powered by Recharts and styled for Vibe UI.
Area Charts
Area Chart
Area charts are ideal for displaying continuous variables, volumes, and trends over time.
Installation
Stacked Area Chart
Stacked Area Charts are ideal for tracking stacked volume changes.
Simple Area Chart
A simple single-line filled area chart view.
Interactive Area Chart
Toggle different data scopes interactively on an Area chart.
Area Chart Gradient
An area chart featuring smooth gradient fills representing data ranges.
Area Chart Legend
Area chart displaying detailed categorised legend labels inside the canvas.
Area Chart Linear
An area chart using linear interpolation to connect coordinates.
Area Chart Step
An area chart using step line segments to connect coordinates.
Area Chart Stacked Expanded
Stacked area chart showing relative percentage contribution of each dataset.
Bar Charts
Bar Chart
Bar charts are useful for comparison of values across categories.
Horizontal Bar Chart
A horizontal layout comparison of values across categories.
Stacked Bar Chart
Compare grouped data categories stacked inside single bars.
Horizontal Stacked Bar Chart
Horizontal comparisons stacked into single bars.
Interactive Bar Chart
A complex interactive bar chart displaying reactive parameter changes.
Linear Bar Chart
A horizontal parameter layout plotting single-axis progressions.
Biaxial Bar Chart
A bar chart plotting dual distinct Y-axes properties.
Bar Chart with Custom Label
Render custom text labels directly on top of bar nodes.
Bar Chart Mixed
Mixed categorised horizontal bar chart representing distinct datasets.
Bar Chart Negative
Bar chart layout plotting both positive growth and negative deficit value segments.
Bar Chart Active
A bar chart with custom active indices highlighted.
Bar Chart Multiple
A bar chart mapping multiple data series side-by-side.
Bar Chart Label
Bar chart rendering text label lists explicitly on top of columns.
Line Charts
Line Chart
Line charts display data points joined by straight line segments, representing sequential value progression.
Interactive Line Chart
Select different metrics reactively on a Line chart layout.
Multi-Line Chart
Plot multiple metrics simultaneously over the same period.
Step Line Chart
A line chart showing step progression thresholds.
Biaxial Line Chart
A line chart plotting dual Y-axes properties simultaneously.
Dashed Line Chart
A line chart showing dashed projection layout configurations.
Custom Dot Line Chart
Show custom circular dot nodes at line intersections.
Line Chart Dots
Line chart featuring active coordinate circular bullet point markers.
Line Chart Linear
Line chart utilizing linear interpolation curves.
Line Chart Step
Line chart utilizing step transitions.
Line Chart Multiple
Line chart displaying multiple lines side-by-side.
Pie Charts
Pie Chart (Donut Chart)
Donut charts are useful to display percentage allocation or data breakdown.
Pie Chart with Custom Labels
Pie Chart with inline percentage labels rendered on top of each slice.
Pie Chart with Custom Legend
Pie Chart mapping configured for clean item breakdown keys.
Pie Chart with Custom Active Shape
Hovering triggers custom pointer lines pointing to active slice metrics.
Pie Chart Simple
Minimalist clean standard pie chart layout.
Pie Chart Stacked
Stacked concentric layers displaying multi-tier compositions.
Pie Chart Donut Active
Donut chart with custom active sector shapes on interaction.
Radar Charts
Radar Chart
Radar charts are excellent for comparing multi-dimensional or multivariate datasets.
Interactive Radar Chart
Compare distinct radar categories interactively using selection tabs.
Radar Chart Dots
Radar chart rendering visible node circular indicators.
Radar Chart Lines Only
Radar chart with outer outline profiles only, skipping area fills.
Radar Chart Legend
Radar chart displaying detailed key labels aligned below the web.
Radial Charts
Radial Chart
A radial chart displaying concentric category circular data.
Radial Chart Label
A radial chart showing labels inside the start of each bar.
Radial Chart Grid
A radial chart with background polar circle grids.
Radial Chart Text
A radial gauge chart displaying progress with centered text overlay.
Radial Chart Shape
A radial chart with custom end boundary angles and circular progress indicator.
Radial Chart Stacked
A stacked radial chart displaying multiple segment items concurrently.
Radial Chart Angle
A 180-degree semi-radial gauge plotting visitor progress.
Radial Chart Icon
Radial gauge chart rendering customized category inline icons.
Radial Chart Legend
Radial chart detailing item indicators in an aligned list config.
Composed Charts
Composed Chart
Combine Area, Bar, and Line elements in one single cohesive data structure.
Stacked Composed Chart
A composed data layout rendering stacked categories inside the bar layers.
Composed Line Scatter
Plot coordinate bubble nodes connected by inline linear tracing paths.
Biaxial Composed Chart
Composed layout configured to index parameters across dual Y-axes.
Scatter Charts
Scatter Chart
Coordinate bubble charts plotting correlation vectors across distinct axes.
Scatter Chart Simple
Coordinate scatter chart plotting discrete data points along X and Y axes.
Scatter Chart Multiple Series
Compare multiple data series using different colored scatter points.
Scatter Chart Label List
A coordinate scatter chart displaying point label overlays.
Bubble Charts
Bubble Chart
A scatter plot where coordinate dots have dynamic bubble sizes representing a Z-axis metric.
Scatter Chart Joint Line
A scatter plot featuring a connected joint line tracking point trends.
Composed Chart Interactive
Composed chart allowing interactive series filtering.
Composed Chart Horizontal
A horizontal composed layout rendering bar columns and line trends.
Composed Chart Custom Label
A composed chart plotting coordinates with custom floating text values.