Ultimate JavaScript chart package for time-based data visualization and exploration

Some of the chart types included in Time Chart charts package:
Area chart Bar chart Line chart Stream chart Waterfall chart Candlestick chart See all

Control at your fingertips.

Unlimited drill-down and auto aggregation, when you wish.

Drill-down to next time unit

Drill down to a next time measurment unit. E.g.: Drill down from a yearl by months view to a month by days view.


Click on a column/bar.
Click on an imaginable column if chart view mode is set to lines or areas.

Tap on a column/bar.
Tap on an imaginable column if chart view mode is set to lines or areas.

Drill-down to larger time period

Timeline axis has two time scale informational elements. Upper line shows time scale for the visualized time grain. Bottom line shows information in larger time scale. You are able to reposition and zoom the visible time range to fit bottom lines timeframe.


Click on a bottom line label

Tap on a bottom line label

Zoom out

Zoom out to view a larger time period.


Click on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Pinch out horizontally on the chart. Tap on the chart and drag up. Release when desired zoom level reached. You may also use dedicated "Zoom out" button.

Zoom in

Zoom in to view a smaller time period.


Click on the chart and drag down. Release when desired zoom level reached.

Pinch in horizontally on the chart. Tap on the chart and drag down. Release when desired zoom level reached.

Go back

Return chart to previous state before recent interaction happened.


Use dedicated "Back" button.

Scroll back (time)

Change the displayed time period to earlier.


Click on the chart and drag to the right. Chart will continue movement by inertia and stop. Click again to stop it manually.

Tap on the chart and drag to the right. Chart will continue movement by inertia and stop. Tap again to stop it manually.

Scroll forward (time)

Change the displayed time period to later.


Click on the chart and drag to the left. Chart will continue movement by inertia and stop. Click again to stop it manually.

Tap on the chart and drag to the left. Chart will continue movement by inertia and stop. Tap again to stop it manually.

Finetune visible time period

Finetune visible time period of the chart by changing the zoom level and adjusting start and end points of the visible time span by single interaction.


Click on the chart and drag to any direction. Release when desired zoom level reached.

Tap on the chart and drag to any direction. Release when desired zoom level reached.

Select time period

Select time period of your liking to view totals for the selection and drill-down to the selected time period if you wish.


Click and drag horizontally on the timeline axis to select time region.

Tap and drag horizontally on the timeline axis to select time region.

Change selected time period

Edit the selected time period.


Click on the selection side and drag it horizontally.

Tap on the selection side and drag it horizontally.

Remove selection

Remove the selection of the time period.


Right click on the selected area.

Tap and hold on the selected area.

Drill-down to selected time period

Drill-down and zoom in to a selected time period.


Click on the selected area.

Tap on the selected area.

Change time grain

Choose different time agreggation unit.


Use dedicated "Displayed time unit" button.

Toggle Lin/Log view

Toggle y-axis from linear to logarithmic scale and back.


Use dedicated "Lin/Log" button.

Export displayed view

Export chart to various formats.


Use dedicated "Export" button.

Give it a try

That's an actual JavaScript chart demo below.
Hint shows your action to take.
Step 1:

It's easy to set-up and customize

Time Chart charts package is designed to provide you with the most advanced features for time-based data visualization and exploration.

Display modes

Lines, areas, bars & any of them stacked. As well as candle sticks.

Axis & Thresholds

Single or multi axis. Linear or logarithmic. Add thresholds to monitor peaks.

Labels & Markers

Add items,labels and markers to show additional time or data based information.

Various charts included in package

Time Chart JavaScript charts package includes following charts:
Network charts

Graph chart

Grouped network chart

Radial graph

Area charts

Smooth area

Smooth area

Multiple areas

Multiple areas

Multiple stacked areas

Multiple stacked areas

100% stacked

Area & candlesticks

Area & bars

Area & bars

Area & lines

Area, lines & bars

Area, lines & bars

Bar charts
Line charts

Smooth line

Smooth line

Multiple lines

Area, lines & bars

Area, lines & bars

Donut & pie charts

Multiple level donut

Multiple level pie chart

Gauge charts

Filled gauge

Donut gauge

Multiple level gauge

Stream charts

Single smooth stream

Multiple streams

Multiple smooth streams

Map charts

Location points

Aggregated location points

Donut charts on map

Pie charts on map

Bar charts on map

Connections on map

Shapes on map

Candlestick charts
Waterfall charts

Waterfall categories

Matrix charts
Hierarchy & flow charts

Hierarchy, bottom top

Flow, bottom top

Bubble charts

Time-based data column chart visualization integration example

ZoomCharts JavaScript charts are designed to save your time on integration and development.
JavaScript code:
End result:

Start creating interactive, professional data visualization quickly and easily using ZoomCharts JavaScript charts library!

system_update_altStart free