Blog Help & Support Contact About Login

ZingChart Kitchen Sink

The Kitchen Sink is an exhibition of the features ZingChart offers. Chart types, themes, elements. It's all here. Everything, but the "kitchen sink."

To The Sink

Basic Charts

The most important part of a JavaScript charting library is its available chart types.
ZingChart offers all our chart types in one library, ensuring you have the interactive chart to meet your needs.

Line Chart


The plot object's aspect attribute can be set to a variety of values to change how a basic line chart is rendered.
More Info

Bar Chart


The plot object's aspect attribute can be set to a variety of values to change how a basic bar chart is rendered.
More Info

Area Chart


The plot object's aspect attribute can be set to a variety of values to change how a basic area chart is rendered.
More Info

Pie Chart


Pie charts can be altered by changing the chart type or the slice value in the plot object.
More Info

Scatter Chart


Scatter chart nodes or as we call them markers can be changed into a variety of shapes.
More Info

Radar Chart


The plot object's aspect attribute can be set to a variety of values to change how a radar chart is rendered.
More Info

Stock Chart


The plot object's aspect attribute can be set to whisker or candlestick to determine which type of stock chart will be rendered.
More Info

Bubble Chart


Bubble scale is calculated in 3 possible ways by setting the scaling attribute.
More Info

Piano Chart


The aspect attribute within the plot object can be set to size, brightness, horizontal, or vertical to determine which type of piano chart will be rendered.
More Info

Bullet Chart


The aspect attribute within the plot object can be set to cone or standard. This determines which type of bullet chart will be rendered.
More Info

Gauge Chart


Gauges can be modified by including attributes within the plot object in order to resize the needles, aperture, center pin, and ring.
More Info

Funnel Chart


Funnel charts can be plotted either vertically or horizontally.
More Info

BubblePie Chart


This chart type allows users to plot their data against an X/Y-axis scale and assign it a bubble size value, and then assign each bubble additional values to represent pie slices.
More Info

Pareto Chart


Pareto charts can be styled and have additional y-axis scales added.
More Info

Range Chart


This chart type is sometimes referred to as an area band graph, band graph, or silhouette graph..
More Info

Boxplot Chart


A boxplot is used to display patterns of quantitative data by splitting data sets into quartiles.
More Info

Waterfall Chart


Waterfall charts can be useful to represent the cumulative effect of sequentially introduced positive or negative values.
More Info

Population Pyramid


This chart type is synonymous for bar with negative stack.
More Info

Mixed Charts


ZingChart can handle up to 9 different x-axes and y-axes to create complex charts.
More Info

Chord Chart


Chord charts can be customized beyond styling with chart-specific properties for angle padding, band space, band width, and radius.
More Info

Rankflow Chart


Rankflow charts compare the rankings of a data set across a series of categories. It can be styled with chart-specific properties as well as standard ZingChart styling.
More Info

Venn Diagram


Venn diagrams do not have unique aspects but can be modified by size and amount of overlap.
More Info

Wordcloud Chart


ZingChart's library allows you to modify colors, size, and positioning of words, as well as ignoring certain terms in a text set.
More Info

Treemap Chart


Treemaps can be modified by including attributes within the plot object in order to apply colors randomly, from start to end, and with a specific palette.
More Info

Javascript Maps


Maps are shapes, available by continent, country, and state/territory levels. They can be connected to the ZingChart Maps API for additional functionality.
More Info

Calendar Chart


A calendar chart or calendar module displays data activity over the course of several months up to a full calendar year.
More Info

Grid


Grids can be supplied with properties for row and column headers/labels, and can link to charts.
More Info

Back to Top

Chart aspects and properties

Beyond the standard chart types, many charts have additional aspects and properties that can enhance your dashboards and data visualizations.

Stacked Bar Chart


Bars can be stacked in different ways with a few small changes to chart JSON.
More Info

Stacked Area Chart


100% stack-type in an area chart allows you to see values in relation to their total.
More Info

Rules


Rules have been set to the plot series so that any value less than zero will display red.
More Info

Currency & Time Series


Time series data adjusts to display specific currency symbols for designated time zones.
More Info

Patterns


The ZingChart library includes 42 unique patterns. They can be applied as a background image to objects after loading the patterns module.
More Info

Arrows


An arrow is placed in this chart by hooking it to and from nodes.
More Info

Images


Images are added to any part of the chart and chart area.
More Info

Shapes


Shapes are styled and positioned around the chart area.
More Info

Back to Top

Interactive Chart Features

Interactive features are what make JavaScript charts so powerful.
They put the control in the hands of your users, allowing them to drill down, zoom in, and more.

Chart Selections


Selection-mode is used to select individual nodes or entire plots. The selected-state and selected-marker plot objects are used to style selected nodes.
More Info

Hover Mode


The hover-mode attribute can be toggled between 'plot' and 'node' values to change the type of hover effect. You can also use the legend to highlight plot.
More Info

Legend Toggle


Toggle-action allows you to dynamically remove plots from a chart by clicking on a legend item. This will appropriately adjust the scales for the remaining plots.
More Info

Shared Chart Features


The "shared" attribute can be applied to the legend, zoom, and crosshair objects to charts in the same graphset for interactivity across charts.
More Info

Drilldown Charts


Drilldown with history will allow your users to click on a series item to load a new chart and data set.
More Info

Drilldown Charts


This drilldown chart uses PHP scripts to generate random data and dynamic labels.
More Info

Label Chart


ALL THE THINGS! If you want to include tons of markers, features, axes, etc. in one chart, here's how its done!
More Info

Chart Tooltips


Many objects in ZingChart support tooltips. Toggle the different tooltips on or off, then hover over those objects to see the tooltips.
More Info

Chart Zooming


The zoom object can be customized to scroll on one or both axes, and the preview object can help users maintain an idea of where they are in a data set after zooming in.
More Info

Back to Top

Animation

Animation is a fun way to draw attention to your data. ZingChart offers a variety of ways to enhance the story you are trying to tell with your charts and graphs.

Animations


Animation can be applied to a variety of chart types with different effects, speeds, methods, and sequencing.
More Info

 

Themes

One way to enhance a chart is to incorporate your brand into charts on the page. We offer several default themes and the ability to apply defaults to all charts rendered with a set of predefined attributes.

Theme Info


These aren't the only themes available for use with ZingChart. You can unleash your inner designer and create custom themes using the same JSON format.
More Info