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.