Learn 63 Chart & Graph concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
Compares discrete categories using the height of vertical bars.
Create an accessible vertical bar chart comparing monthly revenue by product. Start the quantitative axis at zero, sort categories when ranking matters, show units in labels and tooltips, support keyboard focus for every bar, expose the same values in a data table, and reflow labels without clipping on small screens.Compares categories with horizontal bars, especially when labels are long.
Create an accessible horizontal bar chart ranking support topics by ticket count. Keep the value axis at zero, place long category labels beside the bars, order values intentionally, show exact counts on focus or hover, provide a screen-reader data table, and preserve readable labels on mobile.Places related bars side by side to compare series within each category.
Create an accessible grouped bar chart comparing new and returning customers across regions. Use a restrained, color-blind-safe palette plus direct series labels or patterns, keep a shared zero baseline, make the legend keyboard operable, show category and series values in tooltips, and include a data-table alternative.Shows category totals and the contribution of each component in one bar.
Create an accessible stacked bar chart showing quarterly sales by channel. Preserve a common baseline for totals, use direct labels where space allows, keep stack order consistent, distinguish segments without relying only on color, provide exact segment and total values, and offer grouped-bar and tabular alternatives for precise comparison.Compares proportional composition by normalizing every bar to the same total.
Create an accessible 100% stacked bar chart comparing response shares across survey questions. Normalize each bar to 100%, label the percentage scale clearly, keep segment order stable, use a diverging treatment around neutral when appropriate, expose raw counts with percentages, and provide a table for exact values.Extends values in opposite directions from a meaningful midpoint such as zero.
Create an accessible diverging bar chart for positive and negative change by department. Center the scale on zero, use symmetric domains when magnitudes should be compared, label direction and units explicitly, combine hue with signs and labels, support keyboard tooltips, and include exact values in a table.Uses a thin stem and endpoint marker for a lighter ranked comparison.
Create an accessible lollipop chart ranking products by satisfaction score. Use a zero or clearly disclosed baseline, sort deliberately, label endpoint values, keep stems visually secondary, enlarge focus targets beyond the visible dots, announce category and score together, and provide a table alternative.Positions dots on a shared quantitative scale for compact comparison.
Create an accessible Cleveland dot plot comparing completion time across teams. Use one aligned quantitative axis, order categories to reveal the pattern, label units, provide high-contrast focus states and exact-value tooltips, avoid encoding essential meaning with color alone, and include a data table.Connects two points per category to emphasize the gap between them.
Create an accessible dumbbell chart comparing baseline and current scores by team. Label both endpoints directly, state which direction is better, sort by gap when useful, use shape and text in addition to color, show the signed difference in the tooltip, make every pair keyboard focusable, and provide a table alternative.Compares an actual measure with a target and qualitative performance bands.
Create an accessible bullet chart showing actual revenue against target and qualitative ranges. Explain every band, keep the actual measure visually dominant, mark the target with a distinct shape, announce actual, target and variance together, avoid ambiguous red-green-only status, and include textual values outside the graphic.Connects ordered values to reveal change over time or sequence.
Create an accessible line chart showing daily active users over twelve weeks. Use a true time scale, label the metric and units, avoid smoothing that changes the data, show keyboard-accessible points and exact tooltips, annotate meaningful events, handle missing values honestly, and provide a summarized trend plus data table.Compares several trends on the same time scale.
Create an accessible multi-series line chart comparing traffic from three channels. Direct-label line endings when possible, combine color with dash patterns or markers, let users isolate a series without hiding it from assistive technology, use synchronized keyboard tooltips, disclose missing data, and provide a table alternative.Fills the space beneath a line to emphasize magnitude over time.
Create an accessible area chart showing storage consumption over time. Start the quantitative baseline at zero when area magnitude is interpreted, keep fill translucent enough for gridlines and markers, label units, support keyboard-accessible values, explain gaps, and pair the visual with a textual summary and data table.Shows how multiple series contribute to a changing total over time.
Create an accessible stacked area chart showing traffic composition by source over time. Keep series order stable, use distinguishable fills and boundaries, expose each component and total at the focused date, avoid too many layers, let users switch to normalized or separate views, and include a table alternative.Centers flowing stacked areas to show changing composition and volume.
Create an accessible streamgraph showing topic volume over time. Limit the number of layers, keep ordering stable, label or highlight the selected stream, provide keyboard navigation by time and series, state that the floating baseline prevents exact magnitude comparison, and offer stacked-area and tabular alternatives.Shows values that remain constant until discrete changes occur.
Create an accessible step chart for subscription price changes. Use the correct before-or-after interpolation rule, mark every change timestamp, distinguish planned from actual changes, expose value and effective period in keyboard tooltips, avoid misleading diagonal interpolation, and include a chronological table.Presents a compact trend inline with a value or table row.
Create an accessible sparkline beside each KPI with a visible current value, period and direction. Treat the graphic as supplementary, expose a concise text alternative such as change over period, preserve min and max context, avoid standalone color meaning, and provide a detailed chart on demand.Layers compatible marks, commonly bars and a line, in one coordinated plot.
Create an accessible bar-and-line combination chart comparing monthly orders with conversion rate. Clearly associate each series with its axis and unit, avoid dual axes when scales could mislead, use distinct mark types and direct labels, synchronize keyboard tooltips, and provide a table with both measures.Compresses an area chart into layered color bands for dense trend comparison.
Create an accessible horizon chart for comparing many compact time series. Explain the band-folding method and color scale, use the same domain across rows, label each series, expose exact keyboard-accessible values, provide an expanded line-chart view, and never rely on the compressed graphic as the only source of information.Uses angular slices to show a small set of parts of one whole.
Create an accessible pie chart for four mutually exclusive categories that sum to 100%. Order slices deliberately, label percentages and category names directly, avoid 3D effects and tiny slices, use more than color to identify segments, make slices keyboard focusable, and provide the values in a table.Shows part-to-whole proportions with a central space for a total or label.
Create an accessible donut chart showing issue status shares with the total count in the center. Limit categories, label each segment, keep the central number meaningful outside hover, support keyboard focus and selection, avoid tiny inaccessible arcs, and provide exact counts and percentages in a table.Nests proportionally sized rectangles to show hierarchical part-to-whole data.
Create an accessible treemap showing storage by folder and file type. Size rectangles from one explicit measure, use color only for a separate explained measure, preserve hierarchy with spacing and labels, support keyboard drill-down and breadcrumbs, provide meaningful tooltips, and offer a sortable table or tree alternative.Uses concentric rings to show hierarchical proportions from root to leaves.
Create an accessible sunburst chart for product-category revenue. Keep ring depth limited, preserve parent-child relationships, label important arcs, support keyboard traversal and drill-down with breadcrumbs, announce the complete path and value, avoid using color alone for hierarchy, and provide a tree-table alternative.Packs nested circles to communicate hierarchy and approximate relative size.
Create an accessible circle-packing chart showing portfolio value by sector and asset. Use area consistently for magnitude, clearly separate hierarchy levels, label only circles with enough space, support keyboard zoom and breadcrumb navigation, expose exact path and value, and include a sortable hierarchical table.Fills a regular grid of units to show an intuitive proportion.
Create an accessible 10-by-10 waffle chart showing a 68% completion rate. Keep every unit equal, show the percentage as text, announce completed and total counts, use fill plus boundary or pattern rather than color alone, treat the grid as decorative when text is sufficient, and explain rounding.Positions one value against a bounded range using a dial or arc.
Create an accessible gauge for current capacity within a known minimum and maximum. Display the exact value and unit as text, label meaningful thresholds, avoid decorative speedometer detail, use status text in addition to color, announce threshold crossings, and prefer a bullet chart when precise comparison is more important.Displays one or more portions along a compact linear track.
Create an accessible proportional meter showing used, reserved and available storage. Label the total and every segment, keep segment order stable, combine color with text or pattern, support high contrast, announce changes in a polite live region, and use a native progress element when the value represents task completion.Groups continuous values into adjacent bins to reveal a distribution's shape.
Create an accessible histogram of response times with a documented bin rule, adjacent equal-width bins, clearly labelled units and frequency, keyboard-accessible bin ranges and counts, optional median annotation, controls that do not enable misleading bin cherry-picking, and a summary plus downloadable data.Summarizes median, quartiles, spread, whiskers, and possible outliers.
Create an accessible box plot comparing delivery times by carrier. State the whisker rule, label median and quartiles, show sample size, make outliers individually focusable, avoid hiding the underlying distribution for small samples, provide optional raw points, and include summary statistics in a table.Mirrors a density estimate to compare distribution shape and concentration.
Create an accessible violin plot comparing score distributions. Use the same bandwidth and scale for every group, overlay median and quartiles, show sample size, explain that width represents estimated density, support keyboard access to summary values, provide a box-plot or raw-data view, and include a table alternative.Shows every observation as a point along one quantitative axis.
Create an accessible strip plot showing individual completion times by cohort. Add deterministic jitter only to prevent overlap, preserve the actual quantitative position, use transparent points when dense, expose each observation through keyboard navigation or a linked table, show group summaries, and support filtering without losing context.Offsets non-overlapping points to show every observation and local density.
Create an accessible beeswarm plot comparing salary distributions by role. Preserve each value's quantitative axis position, use collision spacing only on the categorical direction, show median and sample size, make points keyboard discoverable through a linked list or table, handle large datasets, and protect sensitive individual data.Uses a smoothed curve to estimate the shape of a continuous distribution.
Create an accessible kernel density plot for transaction amounts. State or document the bandwidth, keep area normalized consistently, show sample size and key quantiles, avoid implying observations outside the valid domain, support keyboard-accessible sampled values, provide histogram and table alternatives, and explain that the curve is an estimate.Stacks aligned density curves to compare distributions across groups or time.
Create an accessible ridgeline plot comparing monthly temperature distributions. Use one shared quantitative scale and bandwidth, keep overlap from obscuring peaks, directly label every ridge, provide keyboard access to summary statistics, let users expand a single distribution, and include small-multiple histogram and table alternatives.Shows an estimate together with a confidence interval, range, or variability measure.
Create an accessible point-and-error-bar chart comparing estimated conversion rates. State whether intervals represent confidence, standard error, standard deviation or range, label the confidence level, keep a shared scale, expose estimate and bounds together, distinguish overlapping groups, and include the underlying statistics in a table.Wraps a trend line in a shaded interval representing uncertainty over time.
Create an accessible forecast line chart with a 95% confidence band. Clearly distinguish observed and forecast periods, label the interval definition, keep the central estimate visible, ensure the translucent band works in high contrast, announce estimate and lower and upper bounds together, and provide a table of forecast values.Plots two quantitative variables to reveal association, clusters, and outliers.
Create an accessible scatter plot comparing response time and satisfaction. Label both quantitative axes and units, avoid claiming causation, include a clearly described trend line only when justified, make points keyboard discoverable through search or a linked table, handle overlap with opacity, and expose exact x and y values.Adds marker area as a third quantitative variable to a scatter plot.
Create an accessible bubble chart comparing growth, retention and customer count. Scale bubble area rather than radius to the third measure, provide a size legend, prevent small marks from becoming unreachable, use color only for an additional explained category, expose all values in keyboard tooltips, and include a sortable table.Maps values in a two-dimensional matrix to a sequential or diverging color scale.
Create an accessible heatmap showing activity by weekday and hour. Choose a sequential scale for one-directional values or a diverging scale around a meaningful midpoint, label rows and columns, provide keyboard cell navigation and exact values, support high contrast beyond color alone, and include a table alternative.Displays pairwise correlation coefficients across many variables in a matrix.
Create an accessible correlation matrix for product metrics. Use a symmetric diverging scale centered on zero, show the numeric coefficient in every cell, label variables on both axes, optionally hide the duplicated triangle without losing information, explain the correlation method and missing-value handling, and provide an equivalent table.Plots several normalized measures around radial axes for a compact profile.
Create an accessible radar chart comparing no more than three profiles across consistently scaled metrics. Show every axis label and range, avoid filled overlap that hides values, use line style and markers in addition to color, expose values through keyboard focus, and provide a grouped bar chart and table for precise comparison.Connects one record across multiple parallel quantitative or ordinal axes.
Create an accessible parallel-coordinates plot for exploring product configurations. Normalize or clearly label every axis, allow keyboard-operable brushing and axis reordering, highlight one record without removing context, manage overplotting, announce the complete selected profile, and provide a filterable data-table alternative.Arranges pairwise scatter plots to explore relationships among several variables.
Create an accessible scatterplot matrix for four numeric variables. Keep shared scales consistent, label the outer axes, use the diagonal for variable names or distributions, support linked keyboard selection across cells, reduce overplotting, summarize notable relationships in text, and provide a table and single-chart detail view.Connects parent and child nodes to show a branching hierarchy.
Create an accessible collapsible tree diagram for an organization structure. Use clear root-to-leaf direction, prevent crossing links, show expand and collapse states, support arrow-key tree navigation, announce each node's level and child count, preserve focus after changes, and provide an indented tree or table alternative.Arranges a hierarchy around a central root to fit broad branching structures.
Create an accessible radial tree diagram for a taxonomy. Keep the root and levels visually clear, orient labels for readability, support keyboard navigation and zoom, announce the full ancestor path, avoid using radius as an unlabelled metric, provide a conventional indented-tree view, and handle deep branches without tiny targets.Uses proportionally thick links to show quantities flowing between stages.
Create an accessible Sankey diagram showing customer movement between acquisition, plan and outcome. Scale link width consistently, minimize crossings, label nodes and stage order, expose source, destination and value for keyboard-focused links, allow filtering without changing totals silently, and provide a source-destination table.Connects categories around a circle to show pairwise flows or relationships.
Create an accessible chord diagram for flows between a small number of regions. Keep category order stable, distinguish direction when it matters, highlight one category and its links through keyboard interaction, announce both endpoints and values, avoid excessive ribbons, and provide a matrix or edge-list alternative.Uses nodes and links to reveal connections, clusters, and central actors.
Create an accessible network graph showing collaboration between teams. Use a deterministic layout, explain node size and link meaning, support keyboard traversal and search, provide a focused-neighbour mode, avoid motion that prevents selection, announce node degree and selected connections, and include an edge-list or matrix alternative.Places nodes along one axis and draws curved links between them.
Create an accessible arc diagram for dependencies between ordered modules. Explain the node order, draw links above a shared baseline, use keyboard selection to highlight one node and its dependencies, announce direction and weight, reduce crossing clutter with filters, and provide a dependency list or matrix alternative.Shows counts or rates decreasing through ordered process stages.
Create an accessible funnel chart for a five-stage conversion journey. Preserve stage order, show count, step conversion and overall conversion as text, size stages by a clearly stated measure, avoid decorative 3D shapes, support keyboard focus, distinguish drop-off from progression, and provide a simple bar chart or table alternative.Colors geographic regions according to a normalized value.
Create an accessible choropleth map showing rate per 100,000 by state. Use normalized rather than raw counts, choose an appropriate sequential or diverging legend, label the time period and missing data, support keyboard region navigation, expose exact values, and provide a ranked table and non-map comparison.Places symbols on locations and scales their area to a quantitative value.
Create an accessible proportional-symbol map showing city sales totals. Scale symbol area to value, provide a size legend, cluster or offset overlapping cities without inventing locations, support keyboard navigation and search, announce place and value, label the geographic scope, and provide a sortable table.Draws routes or flows between geographic origins and destinations.
Create an accessible connection map showing flight routes and passenger volume. Distinguish direction when needed, scale line weight consistently, filter dense routes, make origins and destinations keyboard searchable, announce endpoints and value, avoid animated motion by default, and provide a route table.Uses repeated dots within regions to represent counts and spatial concentration.
Create an accessible dot-density map where each dot represents a stated number of residents. Explain that individual dots do not mark exact people, use a clear legend and projection, maintain sufficient contrast, summarize regional patterns in text, avoid exposing sensitive locations, and provide aggregated regional values in a table.Distorts or replaces geographic area so region size represents a value.
Create an accessible cartogram where region size represents electoral seats. State that geography is intentionally distorted, label every region, preserve recognisable adjacency where possible, provide keyboard focus and exact values, include a conventional map or ranked table, and avoid using area plus color for unexplained competing measures.Shows open, high, low, and close values for each trading interval.
Create an accessible candlestick chart for daily market prices. Explain body and wick encoding, distinguish rising and falling periods with shape or labels as well as color, use a true trading-time scale, expose open, high, low and close together, support keyboard navigation and zoom, and provide an OHLC data table.Uses ticks on a vertical high-low range to mark open and close values.
Create an accessible OHLC chart with a vertical high-low range and clearly oriented open and close ticks. Label price and time scales, avoid relying only on red and green, expose all four values for keyboard-focused intervals, support range selection, explain missing trading days, and include a table.Shows how sequential positive and negative changes produce a final total.
Create an accessible waterfall chart explaining how revenue adjustments lead from gross to net. Mark starting, intermediate and ending totals, label every signed change, connect the running baseline accurately, use symbols and text beyond red and green, expose the running total in tooltips, and provide a calculation table.Places task durations and dependencies along a project timeline.
Create an accessible Gantt chart with tasks, start and end dates, progress, milestones and dependencies. Support keyboard movement through rows and dates, keep labels outside bars, distinguish status without color alone, expose exact scheduling details, provide zoom without trapping horizontal scrolling, and include a structured task table.Maps daily values to colored cells arranged by week and weekday.
Create an accessible calendar heatmap showing daily activity for one year. Align dates correctly for locale and leap years, label month and weekday context, use a clear sequential legend, support keyboard navigation by date, announce date and value, identify missing days separately from zero, and provide a monthly summary and data table.Combines descending bars with a cumulative-percentage line to identify vital contributors.
Create an accessible Pareto chart ranking defect causes with descending count bars and a cumulative-percentage line. Clearly label both measures and axes, mark the chosen threshold, synchronize category tooltips, avoid misleading dual-axis scaling, support keyboard navigation, and provide counts and cumulative percentages in a table.Plots process values over time with center and statistically derived control limits.
Create an accessible statistical process control chart with a center line and correctly calculated upper and lower control limits. Distinguish specification limits from control limits, flag rule violations with icons and text, expose every point and rule through keyboard focus, annotate process changes, and provide the calculation method and data table.Mirrors two distributions around a central axis across ordered categories such as age.
Create an accessible population pyramid comparing two populations across ordered age bands. Use mirrored scales with equal magnitude, label the center and both directions, show counts or percentages explicitly, avoid stereotyping category labels, provide keyboard-accessible paired values, and include a conventional grouped table alternative.