Settings - JSFiddle - Code Playground

Funnel chart

Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. By default, the height of a slice represents it's value. However you might want the area of a slice to represent value. In this case you should add <code>"valueRepresents":"area"</code> property to the chart's config. The height and width of a neck is controlled by <code>neckWidth</code> and <code>neckHeight</code> properties. <h2>Funnel chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our Funnel chart supports patterns. There are several pre-built patterns in our package or you can easily build your own fancy patterns and use them with our charts.

Stacked bar chart with negative values

No-Library (pure JS), HTML, CSS, JavaScript

Column With Rotated Series

As you might have a lot of series on the axis, labels can be rotated so that they would all fit. You can rotate them by any degree you want. In case you don't want rotated labels, they can wrap or some of the labels might be omitted. <h2>Animated columns</h2> The columns can be animated, we offer several animation effects to choose. Animation can be sequenced (one column appears after another) or they can all grow together. Besides the height, opacity can also be animated - the columns can fade-in.

Column With Rotated Series

As you might have a lot of series on the axis, labels can be rotated so that they would all fit. You can rotate them by any degree you want. In case you don't want rotated labels, they can wrap or some of the labels might be omitted. <h2>Animated columns</h2> The columns can be animated, we offer several animation effects to choose. Animation can be sequenced (one column appears after another) or they can all grow together. Besides the height, opacity can also be animated - the columns can fade-in.

Date Based Data

Our serial chart can accept data as date strings, date objects or time stamps. Dates on category axis are placed at logical intervals using any <a href="/tutorials/formatting-dates/">date format</a> you want. Period beginning can be marked as bold and use a different date format. Your data can be yearly, monthly, daily, hourly, up to milliseconds - the chart will handle any time span. The chart can be zoomed-in or panned, Chart scrollbar can shows a rough graph of all your data and you can use it both to scroll or to zoom the chart to desired position. <h2>Hidden bullets</h2> If you zoom-in the chart to a smaller time span, you will notice that the bullets are displayed. When zooming-out at some point bullets are hidden. This is done to avoid a messy look. You can configure this using <strong>hideBulletsCount</strong> property of the graph. <h2>Chart Scrollbar with a graph inside</h2> In the bottom (it can also be on the top) of the chart you have a chart scrollbar which can be used to zoom-in or zoom-out the chart. This scrollbar can be just a simple one or have a graph inside it to show a rough view of how data changed over the whole period of the data available. <h2>Zoomable Value Axis</h2> Besides category axis, value axis can also be zoomable - both using vertical scrollbar and cursor. In this demo value-zooming with cursor is not enabled, as we recommend using it for one direction zooming only.

Date Based Data

Our serial chart can accept data as date strings, date objects or time stamps. Dates on category axis are placed at logical intervals using any <a href="/tutorials/formatting-dates/">date format</a> you want. Period beginning can be marked as bold and use a different date format. Your data can be yearly, monthly, daily, hourly, up to milliseconds - the chart will handle any time span. The chart can be zoomed-in or panned, Chart scrollbar can shows a rough graph of all your data and you can use it both to scroll or to zoom the chart to desired position. <h2>Hidden bullets</h2> If you zoom-in the chart to a smaller time span, you will notice that the bullets are displayed. When zooming-out at some point bullets are hidden. This is done to avoid a messy look. You can configure this using <strong>hideBulletsCount</strong> property of the graph. <h2>Chart Scrollbar with a graph inside</h2> In the bottom (it can also be on the top) of the chart you have a chart scrollbar which can be used to zoom-in or zoom-out the chart. This scrollbar can be just a simple one or have a graph inside it to show a rough view of how data changed over the whole period of the data available. <h2>Zoomable Value Axis</h2> Besides category axis, value axis can also be zoomable - both using vertical scrollbar and cursor. In this demo value-zooming with cursor is not enabled, as we recommend using it for one direction zooming only.

Donut chart

Donut or Doughnut chart is just a simple pie chart with a hole inside. You can define hole radius to any size you need, both in percent or pixels. <h2>Donut chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our pie or donut chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts.

s43h2zjv

No-Library (pure JS), HTML, CSS, JavaScript

7g0nvumr

No-Library (pure JS), HTML, CSS, JavaScript

Column With Rotated Series

As you might have a lot of series on the axis, labels can be rotated so that they would all fit. You can rotate them by any degree you want. In case you don't want rotated labels, they can wrap or some of the labels might be omitted. <h2>Animated columns</h2> The columns can be animated, we offer several animation effects to choose. Animation can be sequenced (one column appears after another) or they can all grow together. Besides the height, opacity can also be animated - the columns can fade-in.