JSFiddle

amcharts's public fiddles

  • 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

  • 6orhfkb1 #1 is the latest version

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

  • v53tdjyb #24 is the latest version

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

  • 6vyL8u9g #8 is the latest version

    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>

  • 4ds8wo7c

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

  • rgpyaf6e #3 is the latest version

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

  • Live data

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

  • Live data #3 is the latest version

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

  • Simple Column Chart

    Column Chart (also known as vertical bar chart) is one of the most common and, arguably, the easiest to read chart type when it comes to visualizing category-based values. Rectangular bars are placed along the category axis with bar length representing the value for a specific category.

  • Simple Column Chart #1 is the latest version

    Column Chart (also known as vertical bar chart) is one of the most common and, arguably, the easiest to read chart type when it comes to visualizing category-based values. Rectangular bars are placed along the category axis with bar length representing the value for a specific category.

  • Spending Gap - Stacked Bar Horizontal Shortage

    Stacked bar charts are useful to demonstrate how a larger data category is comprised of smaller categories, and what part each of the smaller categories plays in the total of a larger one.