js-charts supports 37 unique charts that are divided into 18 chart types.

💡 Watch this page - we are constantly adding new charts.

1. 📊 Bar Charts
2. 📦 Box-and-Whisker Plots (Box Plots)
3. 🎈 Bubble Charts
4. 📊 Column Charts
5. 🔻 Funnel Charts
6. 🌡️ Heatmaps
7. ⏳ Histograms
8. 📈 Line Charts
9. 🍭 Lollipop Charts
10. 📊 Marimekko Charts
11. 📉 Parallel Coordinates Plots
12. 🍩 Pie & Doughnut Charts
13. 🧑‍🤝‍🧑 Population Pyramids
14. 🎯 Scatter Plots
15. 📏 Span Charts
16. 💲 Stock Charts
17. 🌲 Treemaps
18. 🌊 Waterfall Charts

• Usage: 🧵 Patterns 🔍 Comparison
• Types: clustered, stacked & 100% stacked

A bar chart is a visual representation of categorical data where individual bars represent the frequency, count, or other measures of each category. The categories are displayed along the x-axis, and the height or length of the bars, which are plotted on the y-axis (for vertical bar charts) or x-axis (for horizontal bar charts), corresponds to the value or measure of each category. Bar charts are particularly useful for comparing discrete data across categories, making it easy to observe differences between them.

💡 Refer to the 📊 Bar Charts page for detailed information about bar charts.

• Usage: 🧵 Patterns 🔍 Comparison ↔️ Distribution 🌡️ Range

A box-and-whisker plot (or box plot) is a graphical representation of data distribution, showing key summary statistics. It consists of a rectangular "box" that represents the interquartile range (IQR), with the lower and upper edges corresponding to the first (Q1) and third quartiles (Q3), respectively. A horizontal line inside the box indicates the median (Q2). Extending from the box are "whiskers" that reach the smallest and largest data points within 1.5 times the IQR from Q1 and Q3. Data points beyond this range are considered outliers and are plotted as individual points.

💡 Refer to the 📦 Box Plots page for detailed information about box-and-whisker plots (or box plots).

• Usage: 🧵 Patterns 🔍 Comparison ↔️ Distribution ⏱️ Date-Over-Time ⚖️ Proportions 🆚 Relationship

A bubble chart is a variation of a scatter chart (or scatter plot) where each data point is represented by a circle (bubble) instead of a simple dot. It is used to visualize relationships between three numerical variables: two determining the bubble’s position on the x and y axes, and the third controlling the bubble’s size. This allows for an additional dimension of data representation, making bubble charts useful for comparing multiple data points simultaneously.

💡 Refer to the 🎈 Bubble Charts page for detailed information about bubble charts.

• Usage: 🧵 Patterns 🔍 Comparison
• Types: clustered, stacked & 100% stacked

A column chart is a type of bar chart that displays data using vertical bars, where the height of each bar represents a value. It is commonly used to compare discrete categories or track changes over time. The x-axis represents categories, while the y-axis represents numerical values. Column charts are useful for visualizing trends, making comparisons, and identifying patterns such as increases, decreases, or outliers within a dataset.

💡 Refer to the 📊 Column Charts page for detailed information about column charts.

• Usage: 🔍 Comparison
• Types: funnel bar (horizontal); funnel column (vertical)

A funnel chart is a specialized visualization used to represent stages in a process, showing how data values decrease progressively from one stage to the next. It is shaped like a funnel, with the widest section at the top (or at the left) representing the initial stage and narrower sections below (or to the right) indicating subsequent stages. Funnel charts are commonly used in sales, marketing, and business analysis to illustrate conversion rates, drop-off points, or process efficiency.

💡 Refer to the 🔻 Funnel Charts page for detailed information about funnel charts.

• Usage: 🔍 Comparison ⏱️ Date-Over-Time 🧵 Pattern 🆚 Relationship

A heatmap is a data visualization that represents values using a color-coded grid, making it easy to identify patterns, trends, and variations within a dataset. Each cell in the grid corresponds to a category or data point, with its color intensity reflecting the magnitude of the associated value. Darker or more intense colors typically indicate higher values, while lighter or cooler colors represent lower values. Heatmaps are commonly used in fields like finance, marketing, and scientific research to display correlations, densities, or performance metrics.

💡 Refer to the 🌡️ Heatmaps page for detailed information about heatmaps.

• Usage: ↔️ Distribution 🧵 Pattern

A histogram is a type of bar chart that displays the distribution of a continuous numerical variable by dividing the data into intervals, called bins. Each bin represents a range of values, and the height of the corresponding bar indicates how many data points fall within that range. Histograms are useful for showing the frequency distribution of data, allowing for an understanding of the spread, central tendency, and skewness of the dataset. They are commonly used in statistics to analyze the shape of a dataset, detect outliers, and assess the distribution type (e.g., normal, skewed, bimodal).

💡 Refer to the ⏳ Histograms page for detailed information about histograms.

• Usage: ⏱️ Date-Over-Time 🧵 Pattern 🔍 Comparison
• Types: line, stacked line & 100% stacked line

A line chart is a type of chart that displays data points connected by straight lines, making it ideal for showing trends over time or continuous data. The x-axis typically represents time or another continuous variable, while the y-axis shows the values or measurements associated with those time points. Line charts are especially useful for tracking changes in data over a specific period and for comparing multiple variables or datasets, as each dataset can be represented by a different line.

💡 Refer to the 📈 Line Charts page for detailed information about line charts.

• Usage: 🔍 Comparison ⏱️ Date-Over-Time 🧵 Pattern
• Types: lollipop bar, lollipop column, stacked lollipop bar, stacked lollipop column, 100% stacked lollipop bar & 100% stacked lollipop column

A lollipop chart is a variation of a bar chart that uses a thin line with a circular marker at the end to represent data points. It is particularly useful for comparing discrete categories while maintaining a clean and visually appealing design. Lollipop charts work well when you want to emphasize the actual values while reducing visual clutter, making them a good alternative to traditional bar charts when space or aesthetics are a concern.

💡 Refer to the 🍭 Lollipop Charts page for detailed information about lollipop charts.

• Usage: 🔍 Comparison 🆚 Relationship 🥧 Part-To-A-Whole ⚖️ Proportions
• Types: marimekko & 100% stacked merimekko

A marimekko chart, also known as a Mekko chart, is a type of data visualization that displays categorical data along two dimensions. It combines elements of both a bar chart and a stacked bar chart, where the width of each column represents the relative proportion of a category within the data set, and the height of each section within the column represents a subcategory’s contribution. This creates a "mosaic" of blocks, making it easier to compare both the total size of categories and the distribution of subcategories within them.

💡 Refer to the 📊 Mekko (Marimekko) Charts page for detailed information about mekko (marimekko) charts.

• Usage: 🔍 Comparison 🧵 Pattern 🆚 Relationship

A parallel coordinates chart is a visualization technique used to explore and analyze high-dimensional data. It represents each variable as a vertical axis, with data points displayed as lines that connect values across these axes. This format makes it easy to identify patterns, correlations, and trends across multiple variables simultaneously. By adjusting axis scales, colors, and transparency, users can highlight relationships and clusters within complex datasets.

💡 Refer to the 📉 Parallel Coordinates Plots page for detailed information about parallel coordinates charts.

• Usage: 🔍 Comparison 🥧 Part-To-A-Whole ⚖️ Proportions

Pie and doughnut charts are circular charts used to represent proportions within a dataset. A pie chart is a full circle divided into slices, where each slice represents a category’s share of the total. The size of each slice is proportional to the corresponding value, making it useful for visualizing percentage distributions. However, pie charts can become difficult to interpret when there are too many categories or when values are similar in size.

Doughnut charts are a variation of pie charts with a hollow center, which can improve readability by reducing visual clutter. The central space can also be used for additional information, such as total values or labels. Doughnut charts allow for easier comparisons when multiple datasets are presented side by side as concentric rings. Both pie and doughnut charts are best used when highlighting key proportions rather than making precise comparisons between data points.

💡 Refer to the 🍩 Pie & Doughnut Charts page for detailed information about pie & doughnut charts.

• Usage: 🔍 Comparison ↔️ Distribution 🧵 Pattern

A population pyramid is a specialized bar chart that visually represents the age and gender distribution of a population. It consists of two back-to-back horizontal bars, with one side displaying the male population and the other the female population. The y-axis represents age groups (usually in five-year intervals), while the x-axis shows population counts or percentages. The shape of the pyramid reveals key demographic trends, such as birth rates, life expectancy, and population aging.

💡 Refer to the 🧑‍🤝‍🧑 Population Pyramids page for detailed information about population pyramids.

• Usage: 🧵 Pattern 🆚 Relationship

A scatter chart (or scatter plot) is a type of graph used to display relationships between two numerical variables. Each point on the chart represents an individual data value, with its position determined by the values of the two variables—one plotted along the x-axis and the other along the y-axis. Scatter charts are particularly useful for identifying patterns, correlations, and outliers in data, making them widely used in scientific research, economics, and business analytics.

💡 Refer to the 🎯 Scatter Plots page for detailed information about scatter charts (or scatter plots).

• Usage: 🔍 Comparison 🌡️ Range
• Types: span bar (horizontal) & spn column (vertical)

A span chart is a type of visualization used to display the duration or range of events over time. It typically consists of horizontal bars that represent the start and end points of different activities, making it useful for tracking schedules, comparisons, and overlapping time intervals. Span charts are often used in project management (e.g., Gantt charts), product life cycles, and financial analysis to illustrate changes over a period.

💡 Refer to the 📏 Span Charts page for detailed information about span charts.

• Usage: ⏱️ Date-Over-Time 🧵 Pattern 🌡️ Range
• Types: candlestick & open-high-low-close (OHLC)

A candlestick chart is a financial visualization tool used to represent price movements of an asset over a specific period. Each candlestick displays four key values: the opening price, closing price, highest price, and lowest price during that time frame. The body of the candlestick shows the difference between the opening and closing prices, while the thin lines (wicks or shadows) extend to the high and low prices. If the closing price is higher than the opening price, the candlestick is typically colored green or white, indicating a price increase; if the closing price is lower, it is usually red or black, signifying a decline.

💡 Refer to the 💲 Candlestick Charts page for detailed information about stock charts.

An Open-High-Low-Close (OHLC) chart is a type of financial chart used to visualize price movements of assets, such as stocks or commodities, over a specific period. Each data point consists of four key values:

• open price (where the price started),
• high price (the highest value reached),
• low price (the lowest value), and
• close price (where the price ended).

These values are represented by vertical bars with short horizontal ticks—one on the left indicating the open price and one on the right showing the close price.

💡 Refer to the 💲 Open-High-Low-Close Charts page for detailed information about stock charts.

• Usage: 🔍 Comparison 🌲 Hierarchy 🥧 Part-To-A-Whole ⚖️ Proportions

A treemap is a type of chart that visually represents hierarchical data using nested rectangles. Each branch of the hierarchy is given a colored rectangle, and its size corresponds to a specific data value, such as revenue, population, or quantity. The chart’s layout is based on the structure of the hierarchy, with higher-level categories represented by larger rectangles that contain smaller rectangles for subcategories. This visual structure allows you to compare both the size of each category and the proportions between them at a glance.

💡 Refer to the 🌲 Treemaps page for detailed information about treemaps.

• Usage: 🧵 Pattern 🌡️ Range

A waterfall chart is a data visualization that helps illustrate how an initial value changes through a series of additions and subtractions to reach a final value. Each column represents a step in the process, with increases shown in one color and decreases in another. The chart is commonly used in financial analysis, budgeting, and performance tracking to break down changes in revenue, profit, or costs over time.

💡 Refer to the 🌊 Waterfall Charts page for detailed information about waterfall charts.