All JavaScript Charts Demos

Chart Types - Network Charts

Bubble map (mind map)

Javascript mind map example that shows each idea as a node. Uses 'Radial' layout mode to arrange nodes in a circle that stem from the central parent node.

Graph chart: Radial layout

JavaScript radial graph chart. Uses 'Radial' layout mode to arrange nodes in a circle. 'navigation' -> 'mode' set to 'showall' to ensure that all available data is displayed in the initial view.

Radial graph chart with expandable nodes

JavaScript radial graph chart with node images. Uses 'Radial' layout mode. 'navigation' -> 'mode' set to 'focusnodes' so that the intiial view shows only nodes with focus node state - click to expand and see more.

Graph chart

JavaScript social network graph chart with node images. Uses 'Dynamic' layout mode for force-directed node placement. 'focusnode' navigation mode with 'focusNodeExpansionRadius: 2' ensures that the initial view shows focus nodes and an additional level - user can expand further with a tooltip button.

Chart Types - Area charts

100% stacked area chart

100% stacked JavaScript area chart that shows two series across the entire Y-Axis to visualize the proportions of multiple values as part of a total over time. Achieved by using "type": "proportional".

Area chart

Regular JavaScript area chart with one series - the area below series values is filled. Achieved by using 'line' as the series type and applying your desired 'fillColor' under series 'style' property.

Area chart smooth

JavaScript area chart with one series, with 'smoothing' enabled. This eases the curve between data points, ensuring a smooth line with no rough edges.

Bar and area chart for time series data

Time series chart with two series - columns and area. Series type can be set using 'type' property - 'column' for one series and 'line' for the other. 'fillColor' under 'style' applies a color fill to the entire area.

Bar, line, and area chart for time series data

Time series chart with three series, set using 'type' property for each 'series': 'column' for columns, 'line' for line, and 'line' with 'fillColor' for area.

Line and area chart

Time series with two series - line and area. In this example, line series is used to show the maximum value of each time period. Both series use 'line' as 'type', but by providing a 'fillColor' value under 'style', you can apply an area fill.

Multiple areas chart

Time series chart with multiple areas. Since stacking is not configured, the chart by default simply overlays both area series on top of each other.

Candlestick and area chart

JavaScript candlestick chart with area series in the background. Secondary 'valueAxis' enabled. Conditional formatting enabled under 'style' to use different colors for increasing/decreasing values.

Normal stacking: Multiple areas

Zero-based stacking: Multiple areas

Zero-based stacked area chart for time series data. When using 'based' as the stack 'type', all series within a stack will start from zero, which means that they will overlap each other. Useful for comparing differences between multiple values.

Normal stacking: Time series area plot

JavaScript stacked area chart for time series data. Stack 'type' set to 'normal', which means that both areas are stacked cumulatively.

Zero-based stacking: Time series area plot

Stacked area chart for time series data where both series within a stack start from zero and overlap - useful for comparing two series to quickly see where one value deviates from the other. Enabled by setting stack 'type' to 'based'.

Area chart for categorical data

Simple JavaScript area chart for categorical data. Achieved by using 'line' as series 'type' and providing a value to the 'fillColor' property under 'style'.

Bar, line, and area chart for categorical data

JavaScript combo chart with column, line, and area series. You can choose the 'type' for each series - 'column' for columns, 'line' for line, and 'line' with provided 'fillColor' under 'style' for area.

Bar and area chart for categorical data

JavaScript column chart with an area overlay. Achieved by using 'column' for one series and 'line' for other series. Set a 'fillColor' under 'style' to fill the area below the line.

Normal stacking: Stacked area chart for categorical data

JavaScript stacked chart with two area series. With 'normal' as the stack 'type', both series will be stacked cumulatively - the second area will start where the first area ended.

Zero-based stacking: Stacked area chart for categorical data

JavaScript stacked area chart for categorical data with Zero-based stack type. The stack 'type' has been set to 'based', which means that both series start from the zero point and overlap each other.

Normal stacking: Multiple area chart for categorical data

JavaScript stacked chart with multiple area series. With 'normal' as the stack 'type', both series will be stacked cumulatively - the second area will start where the first area ended.

Zero-based stacking: Multiple area chart for categorical data

JavaScript stacked area chart for categorical data with Zero-based stack type. The stack 'type' has been set to 'based', which means that both series start from the zero point and overlap each other.

Area chart with smoothing

Area chart for categorical data with 'smoothing' enabled under 'series' -> 'style'. This will apply easing to the outline, ensuring a smooth appearance with no rough edges.

Stacked streamgraph: No outline smoothing

Streamgraph with multiple area series in a zero-based stack. 'separateNegativeValues' ensures that any negative value in a series goes below the zero on the Y-Axis. 'smoothing' disabled so that the outline does not ease curves between data points.

Stacked streamgraph: Gradient fill

Streamgraph with multiple stacked series in a zero-based stack and with 'separateNegativeValues' enabled. Outline smoothing enabled to ease outline angles. Gradient applied with 'fillGradient' by providing two or more color codes at your specified value points.

Stacked area chart example: Population over time

Stacked time series chart that compares population change across multiple countries. The tooltip will display the value of each series, allowing the user to see the population of each country when hovering over a specific year or decade.

Chart Types - Bar charts

Bar chart with time based data

Simple JavaScript bar chart for time series data. If no 'type' property has been provided within 'series', the series will default to 'column'.

100% stacked bars chart

JavaScript bar chart with 100% stacking. If the stack 'type' is 'proportional', the two series within a stack will be extended across the entire Y-Axis to visualize the proportions of multiple series as part of a total.

Bar and area chart for time series data

Time series chart with two series - columns and area. Series type can be set using 'type' property - 'column' for one series and 'line' for the other. 'fillColor' under 'style' applies a color fill to the entire area.

Bar, line, and area chart for time series data

Time series chart with three series, set using 'type' property for each 'series': 'column' for columns, 'line' for line, and 'line' with 'fillColor' for area.

Side by side bar chart

Side-by-side bar chart for time series data. The two series are displayed right next to each other in a cluster, allowing for easy comparison between both values. This is the default TimeChart behavior when multiple series with 'column' type are present.

Bar, line, and area chart for categorical data

JavaScript combo chart with column, line, and area series. You can choose the 'type' for each series - 'column' for columns, 'line' for line, and 'line' with provided 'fillColor' under 'style' for area.

Bar and area chart for categorical data

JavaScript column chart with an area overlay. Achieved by using 'column' for one series and 'line' for other series. Set a 'fillColor' under 'style' to fill the area below the line.

Side-by-side bar chart for categorical data

Side-by-side (clustered) bar chart for categorical data. Two columns are displayed right next to each other for each category, allowing to quickly compare differences between both series. This is the default FacetChart behavior when multiple series with 'column' type are present.

Stacked bar chart: Global emissions since 1751

Time series chart with multiple stacked columns and an area series in the background. Multiple columns are stacked and displayed as a cumulative value, which allows to see how different fuel types contribute to the total emissions. Achieved by providing a matching 'stack' property to each series that you want to include within a stack.

Horizontal bar chart

By default, FacetChart will display the chart vertically. Include a 'horizontal: true' property to rotate the chart horizontally - this way, the categories will be placed on the Y-Axis, and the values will use X-Axis. However, to instantly rotate all labels too, we recommend using "theme: ZoomCharts.FacetChart.themes.horizontal".

Bar chart with dark theme

JavaScript bar chart with dark theme enabled. The 'theme' property can be used to apply predefined themes to the chart. Here, we used "theme: ZoomCharts.FacetChart.themes.dark" to instantly apply a dark appearance to the chart background, tooltip, and other elements.

Chart Types - Line charts

Line chart with time based data

Simple JavaScript line chart that shows changes over time. This can be achieved by providing 'type: "line"' string for the 'series' you want to display as a line. By default, series will be displayed as 'columns'.

Line chart with smoothing

JavaScript timeline chart with smoothing enabled using 'smoothing: true' string. This will apply easing to the curves and smooth out rough edges for the line.

Bar, line, and area chart for time series data

Time series chart with three series, set using 'type' property for each 'series': 'column' for columns, 'line' for line, and 'line' with 'fillColor' for area.

Line and area chart

Time series with two series - line and area. In this example, line series is used to show the maximum value of each time period. Both series use 'line' as 'type', but by providing a 'fillColor' value under 'style', you can apply an area fill.

Line and bar chart

JavaScript time series chart with lines and columns. For one series, the 'type' is set to 'columns', and for the other, the 'type' is 'line'.

Multiple lines chart

JavaScript timeline with multiple line series - useful for comparing two values over time. This has been achieved by providing multiple series and setting their 'type' to 'line'.

Line Chart

Simple JavaScript line chart for categorical data. Achieved by using 'line' as the 'type' for the 'series'.

Bar, line, and area chart for categorical data

JavaScript combo chart with column, line, and area series. You can choose the 'type' for each series - 'column' for columns, 'line' for line, and 'line' with provided 'fillColor' under 'style' for area.

Line chart for categorical data with smoothing

Simple JavaScript line chart for categorical data, with 'smoothing: true', which will ease curves and provide a smoother appearance for the line.

Chart Types - Donut & Pie charts

Donut chart with drill-down and 'Others' grouping

JavaScript donut chart with multiple levels of hierarchy. Smaller slices have been grouped in a clickable 'Others' slice - this is default behavior but it can be disabled or configured within the 'others' object under 'interaction'. Donut chart was enabled using 'innerRadius' property, which controls the size of the "donut hole" - using 0 or omitting it entirely would create a regular pie chart.

Donut chart with drill-down

Donut chart with multi-level drill down. The 'others' slice has been disabled, which means that all slices within a hierarchy level will be forced to display. The size of the "donut hole" has been increased using 'innerRadius' property.

Donut chart with background image, grouping and drill-down

Donut chart with a custom image displayed in the middle. The image URL was provided as a value to the 'area'->'style'->'image' property. The size of the "donut hole" can be adjusted using 'innerRadius' property within 'pie' object.

Multiple level donut chart with 'Others' grouping

Thin donut chart with multi-level drill down. With 'innerRadius', you can adjust the size of the "donut hole" proportionally to the entire chart. For example, 0 would make it a regular pie chart with no hole, but here it is 0.7, which makes the inner radius 70% of the outer radius.

Donut chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Pie chart - donut, bevel theme, hierarchical structure

This pie chart was turned into donut chart by increasing the 'innerRadius' property. Custom functions were used to add a suffix ("visits") to the tooltips and display percentages in slices. Bevelled edges were applied using 'theme: PieChart.themes.bevel' string.

Pie Chart - donut, 3d (raised) theme, hierarchical

Pie chart with a 3D effect, which was enabled using 'theme: PieChart.themes.raised'.

Pie Chart - donut, one level

Simple 3D donut chart with one level. The 3D effect was enabled using 'theme: PieChart.themes.raised", the slices show percentages as inside labels by using a custom 'styleFunction', and the size of the "donut hole" was adjusted using 'innerRadius' property.

Chart Types - Gauge charts

Single level gauge chart

Simple JavaScript gauge chart. By default, PieChart visual will render the chart as a full circle, but with 'startAngle' and 'endAngle' properties we created a half-circle to produce a gauge chart. Provide a radian value to determine start and end point placement (in this case, '-3,14159' = nine o'clock; '0' = three o'clock)

Multiple level gauge chart

Gauge chart with multi-level drill down - click on a slice to reveal subcategories. 'startAngle' and 'endAngle' properties were used to limit the chart to a half-circle - use radian values to place start and end points for the chart.

Gauge chart filled centre

This gauge chart was created by using 'startAngle' and 'endAngle' to limit the pie chart to a half-circle. Since 'innerRadius' value hasn't been changed from 0, the pie chart has no empty space in the middle.

Gauge with live data

JavaScript gauge chart with real-time data updates. This example showcases how the PieChart visualizes changes in data as they happen. The gauge chart was created by providing custom radian values to 'startAngle' and 'endAngle', but the 3D effect was applied using "theme: PieChart.themes.raised".

Chart Types - Stream charts

Stacked streamgraph: Outline smoothing enabled

JavaScript streamgraph that shows changes over time by stacking multiple series. If 'separateNegativeValues' is true, series values that are negative will be displayed as minus values on the Y-Axis, instead of being subtracted from the stack total. Enabling 'smoothing' eases the outline edges.

Stacked streamgraph: No outline smoothing

Streamgraph with multiple area series in a zero-based stack. 'separateNegativeValues' ensures that any negative value in a series goes below the zero on the Y-Axis. 'smoothing' disabled so that the outline does not ease curves between data points.

Stacked streamgraph: Gradient fill

Streamgraph with multiple stacked series in a zero-based stack and with 'separateNegativeValues' enabled. Outline smoothing enabled to ease outline angles. Gradient applied with 'fillGradient' by providing two or more color codes at your specified value points.

Simple time series area chart

JavaScript time series area chart with single series that shows change over time. Area chart type can be created by setting series 'type' to 'line' and then providing 'fillColor' value under 'style'.

Stream chart

Stream chart with an area and line series to visualize changes over time. With 'separateNegativeValues' enabled, negative values are displayed as minus values under the zero point, instead of being subtracted from the stack total.

Chart Types - Map charts

World map with OpenStreetMap base layer

In GeoChart, you can use your preferred tile server, reference an image URL or simply use a solid color as the base layer. By default, 'background' is enabled and the world map will use OpenStreetMap.

Driving time between cities on the map

Map chart that connects nodes with links and display estimated driving time between the locations in the label. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Location nodes at manually defined coordinates

JavaScript map chart with location markers. The nodes are displayed as an additional 'layer' on top of the map background, and the node coordinates (in DD notation) are referenced from 'data'.

Bubble map chart

Map chart where node size changes depending on the population of each location. In 'data', each node also contains a numeric value (in this case, "population"), and it is used to determine 'node.radius' using a custom 'nodeStyleFunction'.

Network chart over world map

Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.

Donut chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Grouped bubble map chart

This map chart showcases two GeoChart features: multiple nearby nodes are grouped into one ('aggregation') and they drill down when users zoom in; and the 'node.radius' is determined for each node using a numeric value in 'data' (in this case, 'population').

Custom map with droplet-shaped nodes

Map chart with location nodes. The default node shape is 'circle', but here we applied a 'droplet' shape with 'display: "droplet"' under 'style' -> 'node'. Other built-in node shapes include 'text', 'roundtext', 'droplet', 'rectangle', 'rhombus', 'diamond', or you can use 'customShape' to provide your own function.

Chart Types - Candlestick charts

Candlestick chart

Simple JavaScript candlestick chart that displays change over time. Achieved by using 'candlestick' as 'type' for the 'series'.

Candlestick and area chart

JavaScript candlestick chart with area series in the background. Secondary 'valueAxis' enabled. Conditional formatting enabled under 'style' to use different colors for increasing/decreasing values.

Candlestick chart (bar)

Candlestick chart that shows the series as a stepped line instead of columns. When using 'type: "candlestick"' for the series, by default it will be displayed as columns; but here, we also provided 'pattern: "bar"' under 'style'.

Candlestick chart with conditional formatting

Candlestick chart that shows changes in currency exchange rate over time. Achieved with 'candlestick' series type. Green color applied to positive changes and red for negative by using different fillColor values for 'increase' and 'decrease' under 'style'.

Chart Types - Waterfall charts

Waterfall chart

Simple waterfall chart for time series data that shows values as a sequence. Each data point has two values that create a stack - the portion until the first value has a transparent 'fillColor', and the portion between the first and second value uses a green 'fillColor'.

Multiple level span chart with categorical data

JavaScript span chart with drill down where columns may have specific start and end points. Each category has two values in 'data' which are stacked. The first series (in this case "offset") is used to create blank space from the Y-Axis zero point (using 'fillColor: "transparent"), and the second series ("value") has a solid 'fillColor', which allows the green columns to start only after "offset".

Chart Types - Matrix charts

Dot matrix chart

Simple matrix chart that displays each node at a static position. Achieved by providing x and y coordinates for each node in data and enabling 'static' layout mode. The nodes are locked in position and cannot be moved by the user because 'draggable: false' under 'style'->'node'.

Chart Types - Hierarchy & flow charts

Hierarchy chart

JavaScript hierarchy chart example that displays node relationships as a top-down hierarchy. Achieved with 'mode: "hierarchy"' under 'layout' (other options include "dynamic", "radial", "static", "categoryHierarchy", "swimlane").

Category hierarchy layout mode

The 'categoryHierarchy' layout mode differs from 'hierarchy' by sorting nodes based on 'hierarchyCategory' strings, instead of their relationship hierarchy. This way, you can display nodes at the same level regardless of their actual relationships - useful for flow charts, scheduling or resource management.

Hierarchy layout of nodes with links and images

Hierarchy chart where child nodes are positioned below parent nodes - enabled with 'mode: "hierarchy"' under 'layout'. Nodes display images - the image URLs are provided in 'data'. With 'focusnodes' navigation mode, only the first two levels are displayed in the intiial view; click on a node to reveal more data.

Hierarchy chart with node images and Focus Nodes

Hierarchy chart that sorts nodes into levels based on their relationships. The selected navigation mode is 'focusnodes', which means that the initial view displays only nodes with focus node state (in this case, "syslog") and two hierarchy levels above and below it. The user can click on a node to reveal more.

Chart Types - Bubble charts

Bubble map (mind map)

Javascript mind map example that shows each idea as a node. Uses 'Radial' layout mode to arrange nodes in a circle that stem from the central parent node.

Bubble chart

Simple JavaScript bubble chart. Node sizes are determined based on the "radius" value in 'data'; and they are placed on a Cartesian coordinate plane using x and y coordinates in 'data' - use 'static' as layout mode. By default, value axis is not displayed, but it can be enabled and configured using 'valueAxis' object (NetChart v2 and newer) - visit documentation for more details.

Bubble map chart

Map chart where node size changes depending on the population of each location. In 'data', each node also contains a numeric value (in this case, "population"), and it is used to determine 'node.radius' using a custom 'nodeStyleFunction'.

Grouped bubble map chart

This map chart showcases two GeoChart features: multiple nearby nodes are grouped into one ('aggregation') and they drill down when users zoom in; and the 'node.radius' is determined for each node using a numeric value in 'data' (in this case, 'population').

Features - Aura

Auras on dark theme

Network chart on dark theme and with Auras that visually distinguish node groups. Nodes with matching 'aura' values in 'data' are grouped in the same aura. Auras can be configured using 'auras' object, and each aura group can have separate 'style' properties. Dark theme enabled with "theme: NetChart.themes.dark".

Auras with clickable legend items

Network chart example that shows how NetChart's Auras feature can be used to visually group nodes regardless of their actual relationship - nodes with matching 'aura' values in 'data' will be encircled by a colorful aura that can be configured with 'auras' object. Click on legend to instantly hide all nodes within an aura group.

Features - Legend

Pie chart with grouping, drill-down and legend

Simple JavaScript pie chart with clickable 'Others' slice and drill down. User can drill down to a category by clicking on a slice or its legend item. By default, the legend is disabled, but it can be enabled and configured using 'legend' object.

Grid Legend

This example showcases the grid layout, which will arrange all legend items in a grid. In ZoomCharts, you can choose between two legend 'displayMode' settings - 'inline' and 'grid'.

Inline Legend

This example showcases the inline layout, which will arrange legend items responsively based on the available space. In ZoomCharts, you can choose between two legend 'displayMode' settings - 'inline' and 'grid'.

Inline Single Line Legend

If there is not enough space to fit all legend items, the visual will display them as a horizontally scrollable list when using 'inline' displayMode. In this example, the 'height' for legend was limited to 10, which provided enough vertical space for a single line of legend items.

Donut chart with clickable legend

Donut chart where all visible categories are displayed as legend items. The legend is clickable, mirroring the same interactions as their corresponding slices - click to drill down, and Ctrl+click or hold click/tap to select one or multiple categories.

Legend placement: Top

You can configure the position of the legend block within 'panel' under the 'legend' object. In this example, the legend is placed on the top using 'side' property (other options include right, left, bottom); and it is centered using 'align' property.

TimeChart Legend

Time series chart with clickable legend, enabled and configured with 'legend' object. Click on a legend item to show or hide its corresponding series. Note that one of the series is initially hidden - that is because its object within 'series' array contains 'enabled: false' string. This way, you can provide additional data on-demand that the user can reveal only if needed.

FacetChart Legend

Side-by-side chart with three clustered columns per each category. Clicking on a legend item will show or hide its corresponding series, allowing the user to toggle what data is displayed. Legend can be enabled and configured with 'legend' object.

Legend represented classes

In NetChart, nodes and links can be grouped into categories using 'className' values in 'data'. The legend displays each class as a clickable legend item. If you wish to exclude a class from the legend, use "showInLegend: false".

Features - Charts on charts

Network chart over world map

Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.

Social network chart with pie and time charts on click

Explore social networks in a beautiful and interactive JavaScript chart. Click on a node to reveal a pie chart.

Network chart with pie charts on click

JavaScript network chart where clicking on a node will reveal a pie chart, referencing ZoomCharts PieChart package. The pie chart is called using event listeners.

Pie charts as network chart nodes

Network chart where each node displays a pie chart.

Features - Cross filtering

Web traffic analysis dashboard with cross-filtering

Interactive JavaScript dashboard example for web traffic analysis with TimeChart, NetChart, GeoChart, and PieChart. Selecting data in one visual will automatically apply filters to all other visuals, revealing focused and relevant insights on-demand.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Features - Big data

Central Layout Gravity

When using force-directed ('dynamic') layout in NetChart, node placement and interactions use simulated physics. This example showcases the 'centralGravityFactor' property, which pulls nodes towards the center. Incrasing this value will create a more intense effect.

Big data graph with clustered nodes

This graph chart example showcases how NetChart visualizes a large dataset with 736 nodes in the initial view.

Crime investigation dashboard example: Panama Papers

Interactive JavaScript dashboard example for fraud and crime network investigation.

Network Graph - big data network

Big data network graph with 5220 nodes and 6047 links, showcasing the NetChart's capability to visualize even extremely large datasets. If a node marker has small lines, it means that clicking on it will reveal additional nodes that are initially hidden.

Features - Stacking

Normal stacking: Stacked column chart

Time series column chart with multiple stacked columns. The selected 'type' for the stack is 'normal', which means that both columns are stacked cumulatively and the second series starts where the first series ended.

Normal stacking: Time series area plot

JavaScript stacked area chart for time series data. Stack 'type' set to 'normal', which means that both areas are stacked cumulatively.

Stacked bar chart: dark theme

Stacked column chart for time based data. Dark theme manually applied by configuring style properties for background, toolbar buttons, tooltips and other elements, but you can also instantly apply the built-in dark theme with "theme: ZoomCharts.TimeChart.themes.dark"

Stacked bar chart: Global emissions since 1751

Time series chart with multiple stacked columns and an area series in the background. Multiple columns are stacked and displayed as a cumulative value, which allows to see how different fuel types contribute to the total emissions. Achieved by providing a matching 'stack' property to each series that you want to include within a stack.

Stacked area chart example: Population over time

Stacked time series chart that compares population change across multiple countries. The tooltip will display the value of each series, allowing the user to see the population of each country when hovering over a specific year or decade.

Stacked series

Stacked column chart for categorical data. You assign multiple series to the same stack by providing matching values in 'stacks' property - in this case, both were assigned to "s1".

Facet Chart - clustered and stacked series, one level

Stacked column chart with two clusters. Each category shows two stacked columns side-by-side. This was achieved with the 'stacks' property for each series - in this example, series with "default" were featured in one stack, and "secondary" in the other stack.

Features - Filtering

Interactive node highlighting on hover

JavaScript network chart example where hovering over a node will highlight the entire path from the starting point. Achieved with a custom function for 'onHoverChange' and 'onClick' events.

Node filtering with slider

Social network chart example where you can use a slider to filter people by age. The slider uses a custom function that uses the "age" value in 'data' to exclude nodes that are outside the selected age range.

Features - Realtime data

WiFi status like visualization

FacetChart can dynamically change style based on JavaScript functions in real time. This example imitates a WiFi status indicator, where column colors reflect signal reception. While this example uses randomly generated conditions, you can use 'styleFunction' to use conditional formatting for your real-life applications.

Gauge with live data

JavaScript gauge chart with real-time data updates. This example showcases how the PieChart visualizes changes in data as they happen. The gauge chart was created by providing custom radian values to 'startAngle' and 'endAngle', but the 3D effect was applied using "theme: PieChart.themes.raised".

Realtime data source

Real time JavaScript chart that continuously updates data and instantly shows it in the time series. Can be achieved with using 'addData'. This example demonstrates the feature with function that randomly generates data, but you can use your own functions for real-life applications, such as stock index, IoT monitoring, web traffic or other real-time data sources.

Features - Events

Long press event

Network graph example that demonstrates how 'events' object can be used to assign custom functions to event listeners. Here, we assigned 'addData' functions to 'onRightClick' and 'onLongPress'; right clicking a node will spawn a yellow node, but long pressing will spawn a blue node instead. With 'events', you can fully configure each user interaction or other chart events.

PieChart events tester

PieChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

TimeChart events tester

TimeChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

Dashboards - Prototypes

Web traffic analysis dashboard with cross-filtering

Interactive JavaScript dashboard example for web traffic analysis with TimeChart, NetChart, GeoChart, and PieChart. Selecting data in one visual will automatically apply filters to all other visuals, revealing focused and relevant insights on-demand.

Fraud inspector Dashboard

JavaScript dashboard prototype for AML or fraud investigation to identify relationships between involved parties.

Crime investigation dashboard example: Panama Papers

Interactive JavaScript dashboard example for fraud and crime network investigation.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

Customer demographics dashboard example

Dashboard example that visualizes customer demographics data on a world map.

Dashboards - Use cases

HR Analytics Dashboard Example

This HR dashboard is densely packed with the most crucial insights about staff, yet it does not compromise on readability or ease-of-use thanks to its thoughtful layout. With interactive and cross-filtering facet, pie, time and map charts, you can easily find valuable demographic or financial insights and quickly filter relevant data.

Global Sales Dashboard Example

Dashboard example for sales analysis. Sales and profits trends are visualized on time charts. For easy comparison between current and previous period, the latter is displayed as an outline - you can toggle its display by clicking on the legend. The global sales data is visualized on an interactive map chart. Nearby nodes are clustered together and visualized as pie charts that show which brands have the highest sales or profits in the region. Selecting data in one visual will filter the entire dashboard - for example, highlighting a specific time range or clicking on a country.

Sales Funnel Dashboard Example

Analyze conversion rate across the entire sales funnel and identify the best-performing sales agents. The main focus in this dashboard is the time series chart that displays conversion rate per month - selecting a time range will apply a filter to other visuals. Below, there are dynamically changing lists of Top 3 and Bottom 3 sales agents in the selected time period. Each agent also displays a column sparkiline - it is the same time chart visual as above, but with a smaller viewport and disabled axis scales and labels.

Budget vs. Actual Dashboard Example

Financial dashboard for analyzing Budget vs. Actual revenue. Conditional formatting is widely used to provide instant visual cues about performance to the user. The time chart displays multiple series that can be toggled on/off by clicking its legend item, and the secondary Y-axis has been enabled to display revenue growth percentage as a line. The two bar charts next to it are displayed horizontally - in Power BI, it can be achieved by using Combo Bar PRO custom visual, but in ZoomCharts JS, you can rotate FacetChart using the 'horizontal' property.

Customer Success Dashboard Example

Monitor your customer success performance and identify your response time, the best-performing days, hours or months in this dashboard example. The time chart on top shows all quotes on a timeline that initially shows months, but allows you to drill down to see specific days or even hours. Below, there's a facet chart that uses hours as the categories, allowing you to identify relation between performance and time of day. Similarly, the bar chart below does the same, but with weekdays. Lastly, you can use the two charts below as an interactive filter - click on a slice to instantly show only data for your selected quote status, category or employee.

Invoice Analysis Dashboard Example

The Invoice Explorer dashboard is designed so that you can find clients with unpaid invoices in just a few clicks - for example, the map chart can be used to filter data per country or region, and the time chart shows data over time (you can switch between yearly or monthly view). The pie chart will show the ratio between paid and unpaid invoices at your current filter state. Click on the red 'Unpaid' slice, and the table will show all clients with unpaid invoices, plus a clickable link to their entry in the CRM.

Debtor Analysis Dashboard Example

This dashboard displays your outstanding and overdue payments across multiple visuals. The time chart, map chart, and pie charts cross-filter each another, allowing you to find and analyze data across multiple dimensions. Click 'As Table' button to switch to the table view, which will show individual debtors at the current filter state.

ARR Dashboard Example

When analyzing annual recurring revenue, the most important thing is growth - that's why the top column chart shows the increase over previous year as a green segment (achieved by stacking two series - previous period and delta). In addition, the stepped line chart below shows the change percentage - positive growth is marked green, but negative growth is marked red. You can also use the pie and bar charts on the right as filters to see ARR per category, product, owner, and see the ARR gain due to new customers or upsells and loss due to churn or downsells.

HR Workload Analytics Dashboard Example

Analyze organization workload with multiple visuals - time chart, pie chart, net chart, and horizontal facet chart - all of which cross-filter each other. For example, you can select a department in the pie chart, specific employees in the org chart, or a time period, and all other visuals will show data related to your current filter state.

HR Turnover Dashboard Example

Get quick and easy-to-read insights about your employee turnover. The waterfall chart shows changes in your employee count over time - click to drill down to monthly view. The three visuals below can be used to analyze turnover per department, termination distribution per demographic group (gender and age groups), and position and termination reason. Selecting data in one visual will filter the entire report. You can also switch to table view for even more detailed insights.

Sales Revenue Dashboard Example

This dashboard, which consists of a net chart, time chart, pie chart and table, is designed to analyze sales performance against the budget. The time chart displays sales and budgets as two series - actual sales as a column, and budget as an outline; and the conditional formatting applies red color if the budget is not met, and green if it is exceeded. In addition, you can click on the pie chart to drill down and see sales per channel, region, and country.

TV Show Data: 'Shark Tank' Visualized

This dashboard visualizes a dataset about the popular Shark Tank TV show. It shows various interesting insights about the TV show, such as viewership trends per season, or investment trends by the Sharks, and it also showcases how ZoomCharts interactions and cross-filtering could work with your real-life use case.

Retail Supply Chain Dashboard Example

Clean and easy-to-read dashboard that provides the most important insights about retail supply chain & sales. The time chart, pie charts and facet chart can also be used to filter data across the entire dashboard - for example, select a time range to see data for that period in other visuals.

Retail Supply Chain Dashboard Example II

This is another supply chain dashboard example, and it showcases not just the functionality of ZoomCharts visuals, but also the configurability, allowing you to fully customize the appearance and adapt the visuals to your brand colors. Note the KPI cards here - they also have sparkline charts that are created with ZoomCharts time chart visual by disabling axis scales and labels.

Christmas Gift Sales Dashboard Example

Track seasonal product sales with a focus on trends, top-performing items, and regional performance. Includes interactive visuals like time series, map chart, scatter chart, and column charts across multiple pages, each with cross-filtering.

Customer Engagement Dashboard Example: Udemy Courses

This dashboard analyzes Udemy dataset to visualize insights on course engagement, sales, subscriber count and ratings across categories and time. Features include interactive filtering, heatmaps, and trend analysis.

Movie Industry Visualized: Dashboard Example

This dashboard uses data from TMDB to visualize various insights, like the most popular genres, runtimes, seasons, languages and others. It showcases how multiple ZoomCharts visuals can work together to dynamically filter data across the entire dashboard, and the customization options - note the dark theme which alters tooltips, toolbars, and other UI elements.

Used Car Sales Analytics Dashboard Example

Explore eBay vehicle sales trends, pricing distribution, and dealer performance. Interactive visuals highlight top models, regional sales, and time-based comparisons.

Service Desk Ticket Management Dashboard Example

Monitor ticket volume, resolution times, and agent performance across multiple interactive and cross-filtering visualizations, including facet, pie, time, and geo charts.

Marketing Campaign Performance Dashboard Example

Measure and analyze marketing campaign impact by channel, region, and time. Includes KPIs for reach, conversions, and ROI with drilldowns by platform and audience segments.

Financial Analysis Dashboard Example

Analyze various financial insights across multiple pages - see how selecting data in one visual instantly applies a filter to the entire page, including KPI cards (not made by ZoomCharts). The time chart also showcases how you can combine multiple chart types - side-by-side columns for dollars and line for percentage.

Internal Email Analysis Dashboard Example

This dashboard visualizes various insights about internal communication, including trends and patterns regarding open rate, volume, most active times, topic and sentiment analysis, and more.

Chart Packages - NetChart

Social media mapping: X (Twitter) activity on world map

JavaScript world map for Twitter (X) activity monitoring - each tweet is visualized as a node on its geolocation and colored based on the tweet's content. [more technical description is already present in chart embed]

Auras on dark theme

Network chart on dark theme and with Auras that visually distinguish node groups. Nodes with matching 'aura' values in 'data' are grouped in the same aura. Auras can be configured using 'auras' object, and each aura group can have separate 'style' properties. Dark theme enabled with "theme: NetChart.themes.dark".

Hierarchy chart

JavaScript hierarchy chart example that displays node relationships as a top-down hierarchy. Achieved with 'mode: "hierarchy"' under 'layout' (other options include "dynamic", "radial", "static", "categoryHierarchy", "swimlane").

Bubble map (mind map)

Javascript mind map example that shows each idea as a node. Uses 'Radial' layout mode to arrange nodes in a circle that stem from the central parent node.

Network chart

JavaScript network chart that visualizes relationships between people. Each node shows the person's portrait sourced from an external URL. Navigation mode set to 'focusnodes' with 'focusNodeExpansionRadius: 2', which means that the initial view shows only 'initialNodes' and the next two levels of hierarchy - you can click on nodes to reveal more data.

Bubble chart

Simple JavaScript bubble chart. Node sizes are determined based on the "radius" value in 'data'; and they are placed on a Cartesian coordinate plane using x and y coordinates in 'data' - use 'static' as layout mode. By default, value axis is not displayed, but it can be enabled and configured using 'valueAxis' object (NetChart v2 and newer) - visit documentation for more details.

Network chart using random radiuses

This example demonstrates how you can use a custom 'nodeStyleFunction' to affect node sizes or other properties. Here, node sizes are determined by a randomly generated value.

Flow chart

Simple JavaScript flow chart that shows each component as a part of a top-down tree. Achieved by setting layout 'mode' property to "hierarchy".

Driving time between cities on the map

Map chart that connects nodes with links and display estimated driving time between the locations in the label. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Dot matrix chart

Simple matrix chart that displays each node at a static position. Achieved by providing x and y coordinates for each node in data and enabling 'static' layout mode. The nodes are locked in position and cannot be moved by the user because 'draggable: false' under 'style'->'node'.

Network chart over world map

Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.

Graph chart: Radial layout

JavaScript radial graph chart. Uses 'Radial' layout mode to arrange nodes in a circle. 'navigation' -> 'mode' set to 'showall' to ensure that all available data is displayed in the initial view.

Radial graph chart with expandable nodes

JavaScript radial graph chart with node images. Uses 'Radial' layout mode. 'navigation' -> 'mode' set to 'focusnodes' so that the intiial view shows only nodes with focus node state - click to expand and see more.

Grouped Network chart with Auras

Network chart where colorful Auras are used to highlight workgroups and show which people belong to which team. Nodes with maching "aura" values in 'data' will be assigned to the same aura group. Auras can be enabled and configured with the 'auras' object.

Graph chart

JavaScript social network graph chart with node images. Uses 'Dynamic' layout mode for force-directed node placement. 'focusnode' navigation mode with 'focusNodeExpansionRadius: 2' ensures that the initial view shows focus nodes and an additional level - user can expand further with a tooltip button.

Long press event

Network graph example that demonstrates how 'events' object can be used to assign custom functions to event listeners. Here, we assigned 'addData' functions to 'onRightClick' and 'onLongPress'; right clicking a node will spawn a yellow node, but long pressing will spawn a blue node instead. With 'events', you can fully configure each user interaction or other chart events.

Central Layout Gravity

When using force-directed ('dynamic') layout in NetChart, node placement and interactions use simulated physics. This example showcases the 'centralGravityFactor' property, which pulls nodes towards the center. Incrasing this value will create a more intense effect.

Category hierarchy layout mode

The 'categoryHierarchy' layout mode differs from 'hierarchy' by sorting nodes based on 'hierarchyCategory' strings, instead of their relationship hierarchy. This way, you can display nodes at the same level regardless of their actual relationships - useful for flow charts, scheduling or resource management.

Scatter chart with thresholds and regression lines

JavaScript scatter chart example that showcases multiple new features introduced with NetChart v2: X & Y axis lines ('valueAxis'), regression lines ('regressions'), cursor crosshair ('splikelineStyle'), line or area thresholds ('thresholdsX' / 'thresholdsY'), and area shading at custom coordinates ('backgroundShapes').

Big data graph with clustered nodes

This graph chart example showcases how NetChart visualizes a large dataset with 736 nodes in the initial view.

Layout mode comparison: Dynamic, Radial, Hierarchy

In NetChart, you can choose between different layout modes using 'mode' property. In this example, you can switch between 'dynamic', 'radial', and 'hierarchy' to see the difference.

Auras with clickable legend items

Network chart example that shows how NetChart's Auras feature can be used to visually group nodes regardless of their actual relationship - nodes with matching 'aura' values in 'data' will be encircled by a colorful aura that can be configured with 'auras' object. Click on legend to instantly hide all nodes within an aura group.

Navigation mode comparison: showall vs. focusnodes

This org chart example shows the difference between 'showall' and 'focusnodes' navigation modes. In the initial view, 'showall' will display all available data as nodes and links, whereas 'focusnodes' will only reveal 'initialNodes' and nodes with focus node status, plus the number of hierarchy levels defined in 'focusNodeExpansionRadius'.

Companies & Shareholders Network Chart

Interactive network chart that visualizes relations between multiple companies and stakeholders. Click on a node to expand it; use slicers to filter data.

Social network chart with pie and time charts on click

Explore social networks in a beautiful and interactive JavaScript chart. Click on a node to reveal a pie chart.

Fraud inspector Dashboard

JavaScript dashboard prototype for AML or fraud investigation to identify relationships between involved parties.

Crime investigation dashboard example: Panama Papers

Interactive JavaScript dashboard example for fraud and crime network investigation.

Graph Editor

Try NetChart with your own data and experiment with various customization settings in the online Graph Editor.

Link items example

Nodes and links in NetChart can have 'items' object that will display additional content like images, text or other items. Here, we used a function that shows a star icon at each end of a link.

Network chart with pie charts on click

JavaScript network chart where clicking on a node will reveal a pie chart, referencing ZoomCharts PieChart package. The pie chart is called using event listeners.

Hierarchy layout of nodes with links and images

Hierarchy chart where child nodes are positioned below parent nodes - enabled with 'mode: "hierarchy"' under 'layout'. Nodes display images - the image URLs are provided in 'data'. With 'focusnodes' navigation mode, only the first two levels are displayed in the intiial view; click on a node to reveal more data.

Dashed nodes and links

Network chart with dashed links, node outlines and label outlines. 'lineDash' property must have an array that defines the dash sequence - for example, 'lineDash: [3, 3, 5, 5]' means that the pattern will be 3 units of line, 3 blank, 5 line, 5 blank, and then repeat.

Focus nodes

In this org chart example, the nodes with blue background have 'focus node' status, showing all nodes 2 levels deep. Double click on a node to focus it instead.

Random colors example

NetChart example that demonstrates how appearance can be altered with custom functions for 'nodeStyle' and 'linkStyle'. Here, node and link colors are randomly selected by a getRandomNumber function.

Customized link decorations

Links display a circle and arrow to visualize the relationship directions. You can choose between 'circle', 'open arrow', 'hollow arrow', and 'arrow' values for 'fromDecoration' and 'toDecoration' properties.

Node shape comparison

Compare the difference between the built-in node shapes, as defined in the 'display' property for 'node'.

NetChart with dark theme

JavaScript network chart with dark mode enabled. Applied using 'theme: NetChart.themes.dark'.

Radial net layout representing tree data

Social network chart that expands radially from inside out. Achieved with layout:{mode:"radial"}.

Hierarchy chart with node images and Focus Nodes

Hierarchy chart that sorts nodes into levels based on their relationships. The selected navigation mode is 'focusnodes', which means that the initial view displays only nodes with focus node state (in this case, "syslog") and two hierarchy levels above and below it. The user can click on a node to reveal more.

Adding data incrementally

Graph chart where new data is constantly added with 'addData'. In this example, new data is randomly generated with 'getRandomData' function, but real use cases include realtime data updates or 'addData' calls on certain event listeners.

Node items example

Nodes and links in NetChart can have 'items' object that will display additional content like images, text or other items. Here, we used a function that shows an 'age' label and a star icon on certain nodes. This example also showcases 'clickItem' event listener by calling a popup alert when the user clicks on the age label.

Force directed net layout

The 'dynamic' layout mode positions nodes so that the links are of similar length and there are as few overlapping links as possible.

Dashed nodes and links

Shows how to assign different dash areas.

Image nodes look style

This is one of the available node rendering styles - each node displays an image from an URL.

Pinned node style demo

With 'nodeLocked' object, you can apply different style settings to nodes that are in pinned state (activated by user in the tooltip). This example displays a pin icon for pinned nodes - added as a base64 string in 'items'.

Round text nodes look style

One of the available display modes for nodes is 'roundtext', which will make nodes circular, and node labels and images (if provided) will be displayed inside.

Style is embedded in data

In this example, node and link style attributes, such as 'fillColor', 'toDecoration', and 'label', are referenced from data, instead of using style functions.

Text nodes look style

One of the available display modes for nodes is 'text', which will display nodes as text labels. If images are present, they will be shown as small thumbnails next to the label.

Multiline labels

Use style.nodeLabel.aspectRatio to tune label wrapping. Set aspectRatio to 0 to turn off multiline labels.

Fixed node coordinate example

Use node.x and node.y in data together with layout.mode = "static" to control node placement.

Hover effects demo

Nodes display images and links display labels when the user hovers over them. Achieved with custom 'nodeStyle' and 'linkStyle' functions that apply different style properties to 'node.hovered' and 'link.hovered' states.

Images demo

Node images are assigned with a 'nodeStyle' function that loads the image from an URL. Since in this example node ids and filenames use the same naming structure, we can use the "id" value as a wildcard in the URL.

Label style example

Basic label style definitions. The style can be further changed with style functions.

Info popup on hover

Hover over a node to see a custom info popup

Scroll into view

JavaScript network chart demo with automatic zoom into specific nodes with 'scrollIntoView()'.

Manual navigation mode

Network chart with 'manual' navigation mode. The chart will display only nodes that are defined in 'initialNodes' array. User can reveal more data by clicking on a node to expand it.

Show all nodes

Network chart with 'showall' navigation mode. The chart will display all nodes that are present in 'data'.

Preloaded data for NetChart

Simple network chart example with data embedded directly into settings object.

Custom context menu

Simple custom context menu, default menu disabled. Right click on nodes and links to see menu.

Replace Data

Chart.replaceData discards all existing data and replaces with new data. Coordinates are specified in the data so they are not animated.

Chart.addData adds nodes and links to the chart

With 'chart.addData', you can call a function that adds more nodes or links to the network chart. In this example, addData is activated by a graphDoubleClick event: double click on a node to spawn a new node and link.

Chart.removeData removes objects from the chart

Call a function that removes data from your network chart with 'call.removeData'. In this example, removeData is activated by an onClick event: click on a node or link to remove it.

Interactive node highlighting on hover

JavaScript network chart example where hovering over a node will highlight the entire path from the starting point. Achieved with a custom function for 'onHoverChange' and 'onClick' events.

NetChart with data URL

JavaScript network chart that loads data from a URL - in this example, a JSON file. NetChart also easily integrates with MongoDB, Neo4J and other data sources - read more in the 'Integrations' section of our website.

Network Graph - company network, with icons

JavaScript org chart with icons for each node. This example visualizes anonymous company data and shows relationships between employees and stakeholders.

Network Graph - explore social links

Interactive JavaScript network graph example that visualizes social connections between people. Click on a node to expand it and discover new connections in the network.

Network graph with glyphicons

JavaScript network diagram that shows all connected devices in a network. Link labels show glyphicons from a font (referenced from an external .css file in 'assets'). Glyphicons credit: FontAwesome

Pie charts as network chart nodes

Network chart where each node displays a pie chart.

Reload data

Real time network chart where data is automatically reloaded at the selected interval (here - 500ms). The chart instantly reflects any changes in data, making ZoomCharts visualizations suitable for use cases with real time updates.

Network Graph - colorful bubbles

JavaScript network chart example with data-driven node formatting. Node style is referenced from 'data' - each node has its own style parameters, including "fillColor", "radius", and others.

Network Graph - drag external elements onto the chart

This network chart example showcases how NetChart can integrate with external HTML elements. Here, dragging a rectangle on a node will call a function that changes the fill color of that node.

Node filtering with slider

Social network chart example where you can use a slider to filter people by age. The slider uses a custom function that uses the "age" value in 'data' to exclude nodes that are outside the selected age range.

NetChart with data function

JavaScript network chart with incremental loading. Data function is called with jQuery only when the user requests it by expanding the visible nodes.

Network Graph - big data network

Big data network graph with 5220 nodes and 6047 links, showcasing the NetChart's capability to visualize even extremely large datasets. If a node marker has small lines, it means that clicking on it will reveal additional nodes that are initially hidden.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

NetChart on GeoChart

Map chart with a network chart on top. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Replace data with a different source using chart.reloadData

Change network chart's data source with chart.reloadData, which will fire a new request. With chart.replaceSettings, the data URL is changed upon an event - in this case, pressing an external HTML button.

Connect nodes by dragging

Network chart where dragging one node over another will connect them with a link. Achieved with a custom 'connectNodes' function that is called when 'getOverlappingNodes' function meets its conditions (overlapping node X & Y coordinates).

Custom info popup

Simple custom info popup, enabling info popup on custom items.

Custom popup on click

Integration between JavaScript network chart and external HTML elements. Here, an onClick event will call a popup element that is not a part of NetChart, but instead is referenced from HTML.

Legend represented classes

In NetChart, nodes and links can be grouped into categories using 'className' values in 'data'. The legend displays each class as a clickable legend item. If you wish to exclude a class from the legend, use "showInLegend: false".

Network graph - nodes with custom thumbnails

Website sitemap visualized as a JavaScript graph chart. Each website page displayed as a node with its own thumbnail. Initial view shows the top level directories, and clicking will reveal its subdirectories or files.

Change user's mouse cursor on hover

Change user's mouse pointer when they hover over a node in the network chart. Achieved with 'node.cursor' in 'nodeStyle' function.

Radial layout for network chart

Network chart with 'radial' layout mode. The top level in node hierarchy ("Joe") is placed in the middle, and each subnode branches outward in a circular layout.

Custom shape example

In addition to NetChart's built-in node shapes, developers can provide their own shapes and their own rendering functions.

ClassName is embedded in data

In this example, nodes and links have className attribute in data, which assigns them in classes that will allow to customize their 'style' separately with 'nodeClasses' and 'linkClasses'. Useful for visually distinguishing data by category.

Chart Packages - PieChart

Agreggated Pie Charts on Geo Chart

JavaScript map chart that displays each location node as a pie chart. With 'aggregation' enabled, nearby nodes will be merged together and display aggregate values - zoom in to expand. Use the toggle to compare difference between on and off.

Pie chart with others grouping and drill-down

Multi-level pie chart that combines smaller slices into an expandable 'Others' slice. Click on a slice to drill down and reveal its subvalues.

Pie chart with others grouping

Simple pie chart with an 'Others' slice that combines smaller slices. Enabled by default, can be disabled or configured within 'others' object under 'interaction'.

Pie chart with drill down

Multi-level pie chart with three levels of hierarchy - click on a slice to drill down. If a value in 'data' has "subvalues", they will be displayed as another level of hierarchy.

Donut chart with drill-down and 'Others' grouping

JavaScript donut chart with multiple levels of hierarchy. Smaller slices have been grouped in a clickable 'Others' slice - this is default behavior but it can be disabled or configured within the 'others' object under 'interaction'. Donut chart was enabled using 'innerRadius' property, which controls the size of the "donut hole" - using 0 or omitting it entirely would create a regular pie chart.

Donut chart with drill-down

Donut chart with multi-level drill down. The 'others' slice has been disabled, which means that all slices within a hierarchy level will be forced to display. The size of the "donut hole" has been increased using 'innerRadius' property.

Pie chart with grouping, drill-down and legend

Simple JavaScript pie chart with clickable 'Others' slice and drill down. User can drill down to a category by clicking on a slice or its legend item. By default, the legend is disabled, but it can be enabled and configured using 'legend' object.

Donut chart with background image, grouping and drill-down

Donut chart with a custom image displayed in the middle. The image URL was provided as a value to the 'area'->'style'->'image' property. The size of the "donut hole" can be adjusted using 'innerRadius' property within 'pie' object.

Multiple level pie chart with others grouping

Donut chart with multiple levels - user can click on a slice to drill down. By default, 'others' slice is enabled, which will group together smaller slices and allow the user to expand them with a click.

Multiple level donut chart with 'Others' grouping

Thin donut chart with multi-level drill down. With 'innerRadius', you can adjust the size of the "donut hole" proportionally to the entire chart. For example, 0 would make it a regular pie chart with no hole, but here it is 0.7, which makes the inner radius 70% of the outer radius.

Single level gauge chart

Simple JavaScript gauge chart. By default, PieChart visual will render the chart as a full circle, but with 'startAngle' and 'endAngle' properties we created a half-circle to produce a gauge chart. Provide a radian value to determine start and end point placement (in this case, '-3,14159' = nine o'clock; '0' = three o'clock)

Multiple level gauge chart

Gauge chart with multi-level drill down - click on a slice to reveal subcategories. 'startAngle' and 'endAngle' properties were used to limit the chart to a half-circle - use radian values to place start and end points for the chart.

Gauge chart filled centre

This gauge chart was created by using 'startAngle' and 'endAngle' to limit the pie chart to a half-circle. Since 'innerRadius' value hasn't been changed from 0, the pie chart has no empty space in the middle.

World map with pie chart on each country

JavaScript world map where each coordinate displays a pie chart. Nearby nodes are clustered together with 'aggregation', showing aggregate data in the pie chart.

Pie chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Donut chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Donut chart with clickable legend

Donut chart where all visible categories are displayed as legend items. The legend is clickable, mirroring the same interactions as their corresponding slices - click to drill down, and Ctrl+click or hold click/tap to select one or multiple categories.

Themes: bevel, raised, flat, gradient

PieChart comes with some predefined and ready to use themes. Set them with one line of code. Also, you can further modify chart settings as you wish.

Pie chart with background image

Pie chart that displays a background image in the center.

Gauge with live data

JavaScript gauge chart with real-time data updates. This example showcases how the PieChart visualizes changes in data as they happen. The gauge chart was created by providing custom radian values to 'startAngle' and 'endAngle', but the 3D effect was applied using "theme: PieChart.themes.raised".

Slice selection

Pie chart example that shows how interactions like 'drill down', 'select', 'add to selection' and 'reset' can be called with event listeners to customize navigation experience. By default, single click = drill down, hold click = select or add to selection.

Left click behavior: expand, select, or toggle

In PieChart, you can choose the default right click action under 'navigation' -> 'mode': 'select' will make a new selection, 'toggle' will add or remove the clicked slice to the existing selection, and 'drilldown' will reveal the subvalues of the clicked slice.

Scrolling gesture on PieChart

Pie chart with 'scrolling' gesture enabled. When the user "scrolls" in a circular motion (like a rotary phone dial), the chart will slowly drill down and reveal the contents of the 'Others' slice. This and similar gestures can be configured in 'interaction' object.

Custom info in tooltip on hover

Instead of the default tooltip, 'info' calls a custom info popup as defined in a function.

PieChart events tester

PieChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

Legend placement: Top

You can configure the position of the legend block within 'panel' under the 'legend' object. In this example, the legend is placed on the top using 'side' property (other options include right, left, bottom); and it is centered using 'align' property.

Label style

Pie chart labels can be configured in 'style'. Here, we configured label background color, outline, shadow, text font and color, and other settings.

Pie chart label placement

Inside labels and outside labels are both supported by PieChart. Use the toggles to instantly switch between different label placement modes.

Dashed slices and labels

Pie chart with dashed outlines for slices and labels. In the 'lineDash' array, you can define your own dashing pattern. For example, lineDash: [6, 6, 3, 3], will translate to 6 units of line, 6 units of blank space, 3 units of line, 3 units of blank space, and repeat.

Color modes: list, gradient, proportional gradient

Pie chart with different 'colorDistribution' settings - 'list', which will apply color codes from a list, 'gradient', which will apply derived shades from a base color, and 'gradientProportional', which derives shades based on slice size. Switch between modes to see the difference.

Pie Chart - pie, one level, raised theme

3D pie chart with raised edges and drop shadow effect, enabled using 'theme: PieChart.themes.raised'. Note how the NBA player salaries in the labels are displayed as 'units' due to a custom styleFunction - you can configure label content and add your own value affixes, for example, "USD".

Pie chart - donut, bevel theme, hierarchical structure

This pie chart was turned into donut chart by increasing the 'innerRadius' property. Custom functions were used to add a suffix ("visits") to the tooltips and display percentages in slices. Bevelled edges were applied using 'theme: PieChart.themes.bevel' string.

Preloaded data for PieChart

JavaScript pie chart with preloaded data. For simple datasets, preloading data will improve performance and limit data requests during navigation.

PieChart with data URL

JavaScript pie chart that loads data from a URL - in this example, a JSON file. PieChart also easily integrates with MongoDB, MySQL, and other data sources - read more in the 'Integrations' section of our website.

Incremental data-loading

Pie chart that requests data on-demand to load it incrementally. For complex data sets, this can be used as a way to reduce requests and save resources. This example has an event log that displays each request, showcasing incremental loading in action.

PieChart with data function

By default, PieChart will load all available data. You can configure data loading behavior with a custom function in 'dataFunction' under 'data'. In this example, the pie chart loads data incrementally and requests data only when the user performs a drill down.

Pie chart - flat theme, custom labels

Pie chart example with label customization settings applied: 'fillColor' and 'lineColor'. Flat theme enabled using 'theme: PieChart.themes.flat'

Pie Chart - donut, 3d (raised) theme, hierarchical

Pie chart with a 3D effect, which was enabled using 'theme: PieChart.themes.raised'.

Pie Chart - donut, one level

Simple 3D donut chart with one level. The 3D effect was enabled using 'theme: PieChart.themes.raised", the slices show percentages as inside labels by using a custom 'styleFunction', and the size of the "donut hole" was adjusted using 'innerRadius' property.

Pie chart - continental data + breadcrumb feature

Pie chart where data is categorized per continent, and drill down reveals values per each country, and then years. 'Breadcrumbs' display the current filter state - each 'onChartUpdate' event activates 'getActiveSlices', which is then displayed as HTML text above the chart.

Pie Chart - pie, one level, 3d theme, no labels, info popup

JavaScript pie chart example using a 3D theme with labels hidden for a cleaner look. Detailed information is shown in a custom info popup on hover, keeping the chart minimalistic yet informative.

User interaction: swipe slices to input data

Pie chart where user can swipe each slice to adjust values - try it out by dragging a slice outwards. Enabled using 'partialSwipe'.

Pie Chart category order for drill down

Drill down hierarchy in PieChart is determined by the category order. Try different category orders to see how the pie chart changes!

Social network chart with pie and time charts on click

Explore social networks in a beautiful and interactive JavaScript chart. Click on a node to reveal a pie chart.

Network chart with pie charts on click

JavaScript network chart where clicking on a node will reveal a pie chart, referencing ZoomCharts PieChart package. The pie chart is called using event listeners.

Pie charts as network chart nodes

Network chart where each node displays a pie chart.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

Customer demographics dashboard example

Dashboard example that visualizes customer demographics data on a world map.

Travel planner with GeoChart and NetChart

Interactive JavaScript travel planner that consists of a map chart with a network chart as an additional layer on top of the world map. Click on a node to pick a starting point, and then hover over your destination to see the best travel routes.

Pie Chart on Geo Chart

Map chart of the US, where each state displays a pie chart. With 'layers', you can display different chart types from ZoomCharts library on top of your map chart.

PieChart with dark theme

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie chart - donut chart, flat theme, hierarchical structure

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie chart legend customization

Pie chart with legends enabled - click on each item to drill down. You can enable and configure the legend appearance using 'legend' object - here, we changed the font family, size and style, limited display to two columns, configured line spacing, padding, and margin.

Chart Packages - TimeChart

Time Chart - Gradient Columns - Various different gradient setups

Clustered time series column chart with linear gradient fill. Each series has a different gradient style - 'fillGradient' contains different color codes at different positions, and 'fillGradientMode' controls gradient direction.

Bar chart with time based data

Simple JavaScript bar chart for time series data. If no 'type' property has been provided within 'series', the series will default to 'column'.

Line chart with time based data

Simple JavaScript line chart that shows changes over time. This can be achieved by providing 'type: "line"' string for the 'series' you want to display as a line. By default, series will be displayed as 'columns'.

100% stacked area chart

100% stacked JavaScript area chart that shows two series across the entire Y-Axis to visualize the proportions of multiple values as part of a total over time. Achieved by using "type": "proportional".

100% stacked bars chart

JavaScript bar chart with 100% stacking. If the stack 'type' is 'proportional', the two series within a stack will be extended across the entire Y-Axis to visualize the proportions of multiple series as part of a total.

Area chart

Regular JavaScript area chart with one series - the area below series values is filled. Achieved by using 'line' as the series type and applying your desired 'fillColor' under series 'style' property.

Line chart with smoothing

JavaScript timeline chart with smoothing enabled using 'smoothing: true' string. This will apply easing to the curves and smooth out rough edges for the line.

Area chart smooth

JavaScript area chart with one series, with 'smoothing' enabled. This eases the curve between data points, ensuring a smooth line with no rough edges.

Bar and area chart for time series data

Time series chart with two series - columns and area. Series type can be set using 'type' property - 'column' for one series and 'line' for the other. 'fillColor' under 'style' applies a color fill to the entire area.

Bar, line, and area chart for time series data

Time series chart with three series, set using 'type' property for each 'series': 'column' for columns, 'line' for line, and 'line' with 'fillColor' for area.

Candlestick chart

Simple JavaScript candlestick chart that displays change over time. Achieved by using 'candlestick' as 'type' for the 'series'.

Line and area chart

Time series with two series - line and area. In this example, line series is used to show the maximum value of each time period. Both series use 'line' as 'type', but by providing a 'fillColor' value under 'style', you can apply an area fill.

Line and bar chart

JavaScript time series chart with lines and columns. For one series, the 'type' is set to 'columns', and for the other, the 'type' is 'line'.

Multiple lines chart

JavaScript timeline with multiple line series - useful for comparing two values over time. This has been achieved by providing multiple series and setting their 'type' to 'line'.

Multiple areas chart

Time series chart with multiple areas. Since stacking is not configured, the chart by default simply overlays both area series on top of each other.

Candlestick and area chart

JavaScript candlestick chart with area series in the background. Secondary 'valueAxis' enabled. Conditional formatting enabled under 'style' to use different colors for increasing/decreasing values.

Normal stacking: Stacked column chart

Time series column chart with multiple stacked columns. The selected 'type' for the stack is 'normal', which means that both columns are stacked cumulatively and the second series starts where the first series ended.

Stacked column chart with based stacking

Stacked column chart with zero-based stacking. In this example, "high" series completely obscures "low" series. You can configure the layering order to ensure that the series are displayed properly.

Side by side bar chart

Side-by-side bar chart for time series data. The two series are displayed right next to each other in a cluster, allowing for easy comparison between both values. This is the default TimeChart behavior when multiple series with 'column' type are present.

Normal stacking: Multiple areas

Zero-based stacking: Multiple areas

Zero-based stacked area chart for time series data. When using 'based' as the stack 'type', all series within a stack will start from zero, which means that they will overlap each other. Useful for comparing differences between multiple values.

Normal stacking: Time series area plot

JavaScript stacked area chart for time series data. Stack 'type' set to 'normal', which means that both areas are stacked cumulatively.

Zero-based stacking: Time series area plot

Stacked area chart for time series data where both series within a stack start from zero and overlap - useful for comparing two series to quickly see where one value deviates from the other. Enabled by setting stack 'type' to 'based'.

High - low chart

JavaScript high-low chart that shows values over time as ranges between the highest and lowest value - hover to see all values in the tooltip. Achieved with 'candlestick' series type.

Stacked streamgraph: Outline smoothing enabled

JavaScript streamgraph that shows changes over time by stacking multiple series. If 'separateNegativeValues' is true, series values that are negative will be displayed as minus values on the Y-Axis, instead of being subtracted from the stack total. Enabling 'smoothing' eases the outline edges.

Stacked streamgraph: No outline smoothing

Streamgraph with multiple area series in a zero-based stack. 'separateNegativeValues' ensures that any negative value in a series goes below the zero on the Y-Axis. 'smoothing' disabled so that the outline does not ease curves between data points.

Waterfall chart

Simple waterfall chart for time series data that shows values as a sequence. Each data point has two values that create a stack - the portion until the first value has a transparent 'fillColor', and the portion between the first and second value uses a green 'fillColor'.

Stacked streamgraph: Gradient fill

Streamgraph with multiple stacked series in a zero-based stack and with 'separateNegativeValues' enabled. Outline smoothing enabled to ease outline angles. Gradient applied with 'fillGradient' by providing two or more color codes at your specified value points.

Simple time series area chart

JavaScript time series area chart with single series that shows change over time. Area chart type can be created by setting series 'type' to 'line' and then providing 'fillColor' value under 'style'.

Candlestick chart (bar)

Candlestick chart that shows the series as a stepped line instead of columns. When using 'type: "candlestick"' for the series, by default it will be displayed as columns; but here, we also provided 'pattern: "bar"' under 'style'.

Stream chart

Stream chart with an area and line series to visualize changes over time. With 'separateNegativeValues' enabled, negative values are displayed as minus values under the zero point, instead of being subtracted from the stack total.

Grid Legend

This example showcases the grid layout, which will arrange all legend items in a grid. In ZoomCharts, you can choose between two legend 'displayMode' settings - 'inline' and 'grid'.

Inline Legend

This example showcases the inline layout, which will arrange legend items responsively based on the available space. In ZoomCharts, you can choose between two legend 'displayMode' settings - 'inline' and 'grid'.

Inline Single Line Legend

If there is not enough space to fit all legend items, the visual will display them as a horizontally scrollable list when using 'inline' displayMode. In this example, the 'height' for legend was limited to 10, which provided enough vertical space for a single line of legend items.

Columns and area

Time series chart where each series are displayed as a different chart type - 'columns', 'line', and area (enabled by using 'line' and defining a 'fillColor').

Column and line example: temperature chart

Temperature chart example where the highest and lowest temperatures are displayed as lines, but the average for the time period is shown as a column series.

Area chart with custom background image

Historical temperature data in Paris. The area chart displays a custom background image from a URL - defined in 'style' under 'area'.

Group values by weekday

Time chart example where multiple values are displayed as a stack in the monthly view, but when the user drills down to a specific week, each day is displayed as a separate column. Achieved with a custom valueFunction.

Value labels

Column chart that displays each column's value in a label. Enabled and configured using 'valueLabels' object under 'series'.

Stacked bar chart: dark theme

Stacked column chart for time based data. Dark theme manually applied by configuring style properties for background, toolbar buttons, tooltips and other elements, but you can also instantly apply the built-in dark theme with "theme: ZoomCharts.TimeChart.themes.dark"

Area chart with milestones

Area chart with milestone markers. Under 'milestones' array, you can provide a timestamp and label text for each milestone, and configure each milestone marker.

Line with markers

Line chart for time series data where each value shows a line marker. Enabled and configured with 'marker' under 'series'->'style'. In addition to 'shape', you can configure various other properties like 'fillColor', 'width', 'lineColor' and others.

Simple line example

Two series show same data with different aggregations - min and max.

Multiple series

Clustered column chart where four different series are displayed side-by-side on each time axis unit.

Stepped line chart

Time series with stepped line enabled - the line chart uses only right angles to display each value as a straight line over the time axis unit. Achieved with 'steps:true' under 'style' for the series.

Using value function

Two series - one shows only positive values, another - negative values.

Highlighting area between two lines

Two line series are placed in a stack. First line has no fill and provides bottom values. Second line has fill and provides top values.

Highlighting missing data points

Separate series shows values when there is no data. A fixed hidden value axis is used to ensure it fills entire chart height.

Simple columns example

Simple column chart for time data. Zoom in to explore the data.

Candlestick chart with conditional formatting

Candlestick chart that shows changes in currency exchange rate over time. Achieved with 'candlestick' series type. Green color applied to positive changes and red for negative by using different fillColor values for 'increase' and 'decrease' under 'style'.

Line chart with dashed lines for forecast data

Dashed lines indicate forecast data. This was achieved by using two different series and applying different style properties to each. 'lineDash' array defines the dashing pattern; [3,10] means that 3 width units are line and 10 are blank, and repeat.

Area chart with gradient fill

Gradient fill assigns colors to specific values in data. Columns are painted between min and max values of the temperature in current period.

Time zone configuration - UTC data on various time zones

Configure time zone for your time series chart using 'timeZone' under 'timeAxis'. TimeChart will use UTC by default.

Fixed scale value axis

By default, TimeChart will scale the Y-Axis based on the visible values. However, you can set a custom start and end point for the visible Y-Axis value range using 'minValue' and 'maxValue'.

Secondary value axis

Time series chart with two Y-Axes. You can enable a secondary value axis by creating a new object for each axis under 'valueAxis'; then assign each series to an axis using 'valueAxis' property under 'series'.

Floating zero line

With 'zeroline: "floating"', the zero line is allowed to move off chart, which may be useful to emphasize differences between values.

Value axis inside the chart area

By default, the value axis scale and title will be displayed in a dedicated area next to the chart. If 'position' is "inside", the value axis will be overlap the chart instead - useful if you need to save space at the cost of readability.

Styled value axis

This example showcases various style properties for valueAxis: custom font and color for value labels and title, custom gridline and tick colors, label spacing, and others.

Value axis disabled

Hide the Y-Axis scale for the time chart using 'enabled: false' under the value axis object.

Styling line items by dashes

This example showcases how 'lineDash' looks on various chart elements: axis scale (axisLine), horizontal (hgrid) and vertical (vgrid) gridlines, zero line (baseLine), current time indicator (currentTime).

Toolbar outside chart

With the 'location' property under 'toolbar', you can choose if the toolbar is displayed in a dedicated area outside of the chart ("outside") or if it overlays the chart ("inside").

Time zones - hours

In data, the timestamps may be provided in a time zone that differs from UTC. Use 'timeZone' to ensure they are displayed properly.

Time zones - days

This example shows how TimeChart aggregates data based on your selected time zone.

Custom toolbar item

You can create your own toolbar buttons that will execute your defined function upon an 'onClick' event.

No toolbar

You can disable the toolbar with 'enabled: false' under 'toolbar'.

Toolbar on the left side

By default, the toolbar will be displayed on the top of the chart, but you can move it to the left, right, or bottom using 'side' property under 'toolbar'.

TimeChart Legend

Time series chart with clickable legend, enabled and configured with 'legend' object. Click on a legend item to show or hide its corresponding series. Note that one of the series is initially hidden - that is because its object within 'series' array contains 'enabled: false' string. This way, you can provide additional data on-demand that the user can reveal only if needed.

Second TimeChart that displays the preview of the whole data range

The overview chart can be used to navigate the main chart - try dragging the selection around.

Time Chart - columns with negative values

JavaScript time chart example that displays column data with both positive and negative values.

Time Chart - using thresholds to highlight extreme value changes

Time chart with two threshold lines - can be used for KPIs, benchmarks or other use cases. Thresholds can be enabled and configured using 'thresholds' under 'valueAxis' or 'valueAxisDefault'. With just 'from', it will be displayed as a line, but if you also have 'to' value, the threshold will highlight the area between both values.

Time Chart - multiple lines with markers

JavaScript time chart with two value axes that displays one series as area with outline markers, and another series as a 'candlestick' with 'bar' pattern to visualize range. It applies different colors on 'increase' and 'decrease'.

Replacing data

addData will request new data upon activation, which will replace or update the existing data. The chart will instantly visualize the changes.

Realtime data source

Real time JavaScript chart that continuously updates data and instantly shows it in the time series. Can be achieved with using 'addData'. This example demonstrates the feature with function that randomly generates data, but you can use your own functions for real-life applications, such as stock index, IoT monitoring, web traffic or other real-time data sources.

Incremental loading for TimeChart

This example shows how functions can be used to alter the data loading behavior of TimeChart. In this example, the visual loads only data for the visible time span, and makes new requests only on demand.

TimeChart with data URL

JavaScript time chart that loads data from a URL - in this example, a JSON file. TimeChart also easily integrates with MongoDB, MySQL and other data sources - read more in the 'Integrations' section of our website.

Two Data Sources

Time series chart where data is loaded from two different sources. In 'data', we have provided two different data sources with unique URLs, and you can reference values from either source when configuring a new 'series'.

Preloaded data for TimeChart

JavaScript time chart with preloaded data. For simple datasets, preloading data will improve performance and limit data requests during navigation.

Time Chart - area

Simple area chart example that shows changes in gold prices over time. Achieved by using 'line' as the series type and configuring a 'fillColor' property which will apply a yellow fill between the zero line and the series values.

Time Chart - clustered columns, logarithmic scale

Clustered column chart that compares the stock price between two companies over time. Note how the Y-Axis uses a logarithmic scale. By default, TimeChart will use linear scale, but logarithmic scale can be enabled with 'logScale: true'. Users can also toggle it on-the-fly with a toolbar button.

Time Chart - area, with series toggle

Area chart for stock price comparison over time. Clicking on the legend items will show or hide the series.

Stacked bar chart: Global emissions since 1751

Time series chart with multiple stacked columns and an area series in the background. Multiple columns are stacked and displayed as a cumulative value, which allows to see how different fuel types contribute to the total emissions. Achieved by providing a matching 'stack' property to each series that you want to include within a stack.

Custom info popup example

Shows how to provide completely custom HTML code for the info popup.

Info popup example

Shows how to format a values displayed in the info popup.

Time axis limited to year 2013

Limit the time span using 'limitFrom' and 'limitTo' under 'interaction'->'scrolling'. The user will not be able to scroll outside the selected range.

TimeChart events tester

TimeChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

Stacked area chart example: Population over time

Stacked time series chart that compares population change across multiple countries. The tooltip will display the value of each series, allowing the user to see the population of each country when hovering over a specific year or decade.

Time Chart - clustered columns

Side-by-side column chart that compares stock price between two companies over time.

Time Chart - minimized, no labels, no axis, round theme

Sparkline example with limited viewport 'area' - useful for scenarios like inline embedding, tooltips or other use cases. In ZoomCharts, almost any chart element be disabled - in this case, X & Y axes, value labels, toolbar.

Time Chart - 100% proportional area

Area time chart with 100% proportional stacking mode (type: "proportional"). The stack will be extended across the entire Y-Axis, showing the proportional make-up of all series against the total.

TimeChart with data function

This example shows how functions can be applied to affect data loading.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Time Chart - Custom Gradient Columns

Column time chart with linear gradient fill. Select gradient direction with 'fillGradientMode', and define gradient points with color codes with 'fillGradient'.

Time Chart - Gradient Columns - Horizontal Cylinders

Stacked column chart with a 3D "cylinder" effect which applies a slight gradient to the series fill color. Enabled using fillGradientType: "cylinder".

Time Chart - Gradient Columns - Vertical Cylinders

Stacked column chart with a slight linear gradient applied to the fill color. Enabled using fillGradientType: "cylinder".

Legend

Use legend to show or hide some series.

Initial animation

Example showing how to enable and customize animation speed/intensity on initial chart loading.

Chart Packages - FacetChart

WiFi status like visualization with a slider and selection

Example on how to dynamically change style for individual chart columns. Adjust slider to set selected columns accordingly.

WiFi status like visualization

FacetChart can dynamically change style based on JavaScript functions in real time. This example imitates a WiFi status indicator, where column colors reflect signal reception. While this example uses randomly generated conditions, you can use 'styleFunction' to use conditional formatting for your real-life applications.

Bar chart

Simple bar chart for categorical data. Users can drill down by clicking directly on data, which will reveal subvalues for the category.

Line Chart

Simple JavaScript line chart for categorical data. Achieved by using 'line' as the 'type' for the 'series'.

Area chart for categorical data

Simple JavaScript area chart for categorical data. Achieved by using 'line' as series 'type' and providing a value to the 'fillColor' property under 'style'.

Bar, line, and area chart for categorical data

JavaScript combo chart with column, line, and area series. You can choose the 'type' for each series - 'column' for columns, 'line' for line, and 'line' with provided 'fillColor' under 'style' for area.

Bar and area chart for categorical data

JavaScript column chart with an area overlay. Achieved by using 'column' for one series and 'line' for other series. Set a 'fillColor' under 'style' to fill the area below the line.

Normal stacking: Stacked area chart for categorical data

JavaScript stacked chart with two area series. With 'normal' as the stack 'type', both series will be stacked cumulatively - the second area will start where the first area ended.

Zero-based stacking: Stacked area chart for categorical data

JavaScript stacked area chart for categorical data with Zero-based stack type. The stack 'type' has been set to 'based', which means that both series start from the zero point and overlap each other.

Normal stacking: Multiple area chart for categorical data

JavaScript stacked chart with multiple area series. With 'normal' as the stack 'type', both series will be stacked cumulatively - the second area will start where the first area ended.

Zero-based stacking: Multiple area chart for categorical data

JavaScript stacked area chart for categorical data with Zero-based stack type. The stack 'type' has been set to 'based', which means that both series start from the zero point and overlap each other.

Side-by-side bar chart for categorical data

Side-by-side (clustered) bar chart for categorical data. Two columns are displayed right next to each other for each category, allowing to quickly compare differences between both series. This is the default FacetChart behavior when multiple series with 'column' type are present.

Area chart with smoothing

Area chart for categorical data with 'smoothing' enabled under 'series' -> 'style'. This will apply easing to the outline, ensuring a smooth appearance with no rough edges.

Line chart for categorical data with smoothing

Simple JavaScript line chart for categorical data, with 'smoothing: true', which will ease curves and provide a smoother appearance for the line.

World countries and bar charts

JavaScript world map chart that shows a bar chart on top of the map. GeoChart can reference other ZoomCharts visuals when creating 'layers'.

Span chart with categorical data

Simple JavaScript span chart where each column has a start and end value. Achieving by creating two series, one with the 'offset' value and other 'value'; and making the former series transparent.

Multiple level span chart with categorical data

JavaScript span chart with drill down where columns may have specific start and end points. Each category has two values in 'data' which are stacked. The first series (in this case "offset") is used to create blank space from the Y-Axis zero point (using 'fillColor: "transparent"), and the second series ("value") has a solid 'fillColor', which allows the green columns to start only after "offset".

Stacked series

Stacked column chart for categorical data. You assign multiple series to the same stack by providing matching values in 'stacks' property - in this case, both were assigned to "s1".

FacetChart with drilldown

Column chart with drill down. Click on a column to drill down and reveal that category's subvalues.

Side-by-side series

Simple side-by-side chart for categorical data that displays two series columns per each category.

Value labels

Multilevel drill-down with breadcrumbs

Column chart that is categorized per continent, and drill down reveals values per each country, and then years. 'Breadcrumbs' display the current filter state - each 'onChartUpdate' event activates 'getActiveSlices', which is then displayed as HTML text above the chart.

Value formatter function

valueFormatterFunction changes how the values are displayed in the tooltip - in this example, by adding " C" as the value suffix for temperatures.

FacetChart Legend

Side-by-side chart with three clustered columns per each category. Clicking on a legend item will show or hide its corresponding series, allowing the user to toggle what data is displayed. Legend can be enabled and configured with 'legend' object.

Series - side by side

Side-by-side columns displayed as clusters on each X-Axis category. This is the default FacetChart behavior when multiple series are present.

Facet Chart - clustered and stacked series, one level

Stacked column chart with two clusters. Each category shows two stacked columns side-by-side. This was achieved with the 'stacks' property for each series - in this example, series with "default" were featured in one stack, and "secondary" in the other stack.

Facet Chart - stacked area fill, markers, custom line colors, custom line width, smoothing, one level

Stacked area chart with eight series. Each 'series' can be customized separately, including 'fillColor' and other properties. Stack type set to 'normal', which means that series are stacked cumulatively (unlike zero-based or proportional). Note the tooltip, which displays all series values for the category on mouseover.

Preloaded data for FacetChart

JavaScript column chart with preloaded data. For simple datasets, preloading data will improve performance and limit data requests during navigation.

FacetChart with data URL

JavaScript column chart that loads data from a URL - in this example, a JSON file. FacetChart also easily integrates with MongoDB, MySQL and other data sources - read more in the 'Integrations' section of our website.

Facet Chart - clustered series, one level

Clustered column chart that shows multiple series per each country. Note how the tooltip displays each value within the cluster upon hovering.

Facet Chart - drill down, one level

Simple column chart with drill down. The initial view displays the totals per continent - click to drill down to a specific contintent and see values per each country.

FacetChart with data function

This example shows how functions can be applied to data.

Horizontal bar chart

By default, FacetChart will display the chart vertically. Include a 'horizontal: true' property to rotate the chart horizontally - this way, the categories will be placed on the Y-Axis, and the values will use X-Axis. However, to instantly rotate all labels too, we recommend using "theme: ZoomCharts.FacetChart.themes.horizontal".

Bar chart with dark theme

JavaScript bar chart with dark theme enabled. The 'theme' property can be used to apply predefined themes to the chart. Here, we used "theme: ZoomCharts.FacetChart.themes.dark" to instantly apply a dark appearance to the chart background, tooltip, and other elements.

Chart Packages - GeoChart

Agreggated Pie Charts on Geo Chart

JavaScript map chart that displays each location node as a pie chart. With 'aggregation' enabled, nearby nodes will be merged together and display aggregate values - zoom in to expand. Use the toggle to compare difference between on and off.

Node radius by population

Example how to extend the internal Leaflet map to add additional map layers using custom plugins.

Country shapes with labels

Items are used to display shape labels. This example demonstrates also how to adjust label position for some countries or change country colors.

Custom shapes

Example showing how to create polygon type custom shapes.

Auto Aggregation and scaling by the rank of the currently visible nodes.

An example for usage for "allObjectsStyleFunction".

Changing shapes based on zoom level

This example demonstrates how to load / replace country, area or region shapes based on some condition.

World countries chart shapes only

Map chart with a shape layer that allows the user to click on countries and filter data.

Geo chart

Simple geo chart with world countries as a shape layer and without a base layer. Shapes referenced from 'data' in GeoJSON format.

World map with OpenStreetMap base layer

In GeoChart, you can use your preferred tile server, reference an image URL or simply use a solid color as the base layer. By default, 'background' is enabled and the world map will use OpenStreetMap.

Driving time between cities on the map

Map chart that connects nodes with links and display estimated driving time between the locations in the label. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Location nodes at manually defined coordinates

JavaScript map chart with location markers. The nodes are displayed as an additional 'layer' on top of the map background, and the node coordinates (in DD notation) are referenced from 'data'.

Bubble map chart

Map chart where node size changes depending on the population of each location. In 'data', each node also contains a numeric value (in this case, "population"), and it is used to determine 'node.radius' using a custom 'nodeStyleFunction'.

World map with pie chart on each country

JavaScript world map where each coordinate displays a pie chart. Nearby nodes are clustered together with 'aggregation', showing aggregate data in the pie chart.

Network chart over world map

Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.

World countries and bar charts

JavaScript world map chart that shows a bar chart on top of the map. GeoChart can reference other ZoomCharts visuals when creating 'layers'.

Grouped Location Chart

JavaScript geochart example that aggregates nearby locations into cluster nodes.

Pie chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Donut chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Grouped bubble map chart

This map chart showcases two GeoChart features: multiple nearby nodes are grouped into one ('aggregation') and they drill down when users zoom in; and the 'node.radius' is determined for each node using a numeric value in 'data' (in this case, 'population').

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

Customer demographics dashboard example

Dashboard example that visualizes customer demographics data on a world map.

Social media mapping: X (Twitter) activity on world map

JavaScript world map for Twitter (X) activity monitoring - each tweet is visualized as a node on its geolocation and colored based on the tweet's content.

Auto Aggregate of data

JavaScript geochart example that automatically clusters nearby data points depending on the zoom level. Zoom in to reveal a more detailed view.

NetChart on GeoChart

Map chart with a network chart on top. In 'data', the node coordinates are provided in the 'nodes' array, but link relationships ('from' and 'to' node IDs) and label text are contained within the 'links' array. 'Layer' references ZoomCharts NetChart.

Travel planner with GeoChart and NetChart

Interactive JavaScript travel planner that consists of a map chart with a network chart as an additional layer on top of the world map. Click on a node to pick a starting point, and then hover over your destination to see the best travel routes.

Custom map with droplet-shaped nodes

Map chart with location nodes. The default node shape is 'circle', but here we applied a 'droplet' shape with 'display: "droplet"' under 'style' -> 'node'. Other built-in node shapes include 'text', 'roundtext', 'droplet', 'rectangle', 'rhombus', 'diamond', or you can use 'customShape' to provide your own function.

Pie Chart on Geo Chart

Map chart of the US, where each state displays a pie chart. With 'layers', you can display different chart types from ZoomCharts library on top of your map chart.

Twitter (X) data map with dynamic shape colors

Map chart for social media monitoring. The map applies conditional formatting to the shape layer to color-code countries by the most popular topic in the country. Zoom in to see individual tweets.

Selectable shapes

JavaScript map chart with selectable countries as the shape layer. The shape layer is referenced from data in GeoJSON format. 'selection' enabled, which means that you can click on a country to select it. Select multiple countries with Shift+click. In a real use case, this would apply a selection to all nodes within a shape.

Incremental data loading only in visible area

Map chart with retail locations (in this example, gasoline stations in Riga, Latvia). The map loads data only for the visible area, and requests new data only when the user moves the chart or zooms out.