JSFiddle

amcharts's public fiddles

  • Layered Column Chart

    In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization. To achieve that with amCharts 4, you just disable clustering on each series (<code>series.clustered = false</code>) and then make columns in one of them wider (or narrower) than the other (<code>series2.columns.template.width = am4core.percent(50)</code>).

  • w5afx94g

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

  • d24p981x

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

  • Layered Column Chart

    In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization. To achieve that with amCharts 4, you just disable clustering on each series (<code>series.clustered = false</code>) and then make columns in one of them wider (or narrower) than the other (<code>series2.columns.template.width = am4core.percent(50)</code>).

  • Range chart with different fill colors

    With amCharts 4 you can create a range chart and fill parts of it based on the values in the range. In this example, the parts where open value is higher than the close value are filled with one color, and when close is higher than open another color is used.

  • Multiple Value Axes

    <h2>Any number of axes</h2> The chart can contain any number of axes - both vertically and horizontally. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Multiple_axes"]More information about multiple axes[/amb] <h2>Configuring the axis line</h2> Axis line itself is configurable, like any other of the chart. In this demo we're assigning the same color as the related series, so that the relation is most prominent. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#The_axis_line"]More about configuring axis line[/amb] <h2>Anything can be a bullet</h2> Besides pre-defined shapes, bullet can be anything in amCharts 4 - an SVG image or path, static image, a shape like triangle or square, another complex shape - even another chart. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More information about bullets[/amb]

  • Funnel with Gradient Fill

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

  • Multiple Data Sets

    Stock chart is a great tool which will save your time. It is designed to work mostly with financial data, but can be used for other purposes as well. Our Stock chart supports multiple data sets and has a ready to use data set selector (at the left, although you can adjust position to your needs). Data sets might be compared one to another. You can compare absolute values or percent values, as this is quite an often practice when dealing with prices of securities or stocks. <h2>Data grouping into longer periods</h2> If you roll-over the chart so that chart cursor would appear, you will notice that each data point represents one day. This is quite expected, as we provided daily data for this chart. Now, zoom-out to "year" view by clicking on the 1 year button at the bottom and roll over the chart again – now, data points jump at 7 days (one week) interval. Again, zoom-out to the max so that all the data is visible. One data point represents one month now! Did we had to provide data for the different periods? No, the chart did all the grouping itself. We recommend reading <a href="https://www.amcharts.com/kbase/understanding-data-grouping-of-stock-chart/">Understanding data grouping tutorial</a> to get more information about this great feature.

  • Multiple Data Sets

    Stock chart is a great tool which will save your time. It is designed to work mostly with financial data, but can be used for other purposes as well. Our Stock chart supports multiple data sets and has a ready to use data set selector (at the left, although you can adjust position to your needs). Data sets might be compared one to another. You can compare absolute values or percent values, as this is quite an often practice when dealing with prices of securities or stocks. <h2>Data grouping into longer periods</h2> If you roll-over the chart so that chart cursor would appear, you will notice that each data point represents one day. This is quite expected, as we provided daily data for this chart. Now, zoom-out to "year" view by clicking on the 1 year button at the bottom and roll over the chart again – now, data points jump at 7 days (one week) interval. Again, zoom-out to the max so that all the data is visible. One data point represents one month now! Did we had to provide data for the different periods? No, the chart did all the grouping itself. We recommend reading <a href="https://www.amcharts.com/kbase/understanding-data-grouping-of-stock-chart/">Understanding data grouping tutorial</a> to get more information about this great feature.

  • Gantt Chart with dates

    Gannt chart is a variation on <a href="https://www.amcharts.com/demos/3d-bar-chart/">Bar chart</a> commonly used to visualize project schedule. Each bar represents a task in the schedule with its start and end locations corresponding to the date/time of the item's beginning and end.

  • Test

    Advanced capabilities of amCharts 4 enable you to break out of the dated paradigms of UI and data visualization. Now you can implement beautiful map drill-down charts without any additional UI elements. For an extensive tutorial make sure you check out this <a href="https://css-tricks.com/making-movies-with-amcharts/#article-header-id-5">article on CSS-tricks</a>.

  • Test

    Advanced capabilities of amCharts 4 enable you to break out of the dated paradigms of UI and data visualization. Now you can implement beautiful map drill-down charts without any additional UI elements. For an extensive tutorial make sure you check out this <a href="https://css-tricks.com/making-movies-with-amcharts/#article-header-id-5">article on CSS-tricks</a>.

  • 3D Bar Chart

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

  • Dragging Pie Slices

    <h2>Draggable anything</h2> Anything can be made "draggable" on the chart, including pie chart slices. This advanced demo shows how you can set <code>draggable</code> property on slices, and utilize event handlers to create a setup where you can drag slices from one chart to another.

  • Dragging Pie Slices

    <h2>Draggable anything</h2> Anything can be made "draggable" on the chart, including pie chart slices. This advanced demo shows how you can set <code>draggable</code> property on slices, and utilize event handlers to create a setup where you can drag slices from one chart to another.

  • uobqpj3c

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

  • 6orhfkb1

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

  • v53tdjyb

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

  • 6vyL8u9g

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

  • Column With Rotated Series

    Column chart (or Bar chart) is the most recognizable and easiest to comprehend chart type. When your goal is not to woo viewers with fancy graphics but rather delivering the information in the most straightforward way, Column chart is your best friend. However, when you get over a certain amount of columns (or your items just have fairly long names) axis labels become quite crowded and hard to read. One option to rectify this is to <a href="https://www.amcharts.com/dataviz-tip-13-switch-horizontal-bar-chart-labels-dont-fit/">switch from a vertical to a horizontal bar chart</a>. Another quick fix is to turn the labels on their side. In amCharts 4 you do this with the <a href="https://www.amcharts.com/docs/v4/reference/label/#rotation_property"><code>Label.rotation</code></a> property on the axis. <code>categoryAxis.renderer.labels.template.rotation = 270;</code>