JSFiddle

amcharts's public fiddles

  • Real time data sorting

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

  • Radar Chart visualizing yearly activities

    You can easily create the same chart <a href="https://shmetrix.com/visualizing-my-yearly-bike-rides-or-other-activities/">using your own data from Strava</a>.

  • Multiple Value Axes #8 is the latest version

    <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]

  • 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.

  • Layered Column Chart #3 is the latest version

    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 #1 is the latest version

    <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 #1 is the latest version

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

  • Multiple Data Sets #1 is the latest version

    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 #1 is the latest version

    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 #2 is the latest version

    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 #1 is the latest version

    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 #3 is the latest version

    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 #1 is the latest version

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