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.

Horizontal bar chart on dark theme