JSFiddle

amcharts's public fiddles

  • Drill-down Treemap

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

  • Drill-down Treemap

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

  • Drill-down Treemap

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

  • Stacked Area

    Stacked Area Chart (also known as Stacked Area Plot) is a variation on a simple Area Chart with multiple areas stacked on top of each other. This allows comparing the evolution of the whole as well as contributions of individual parts over a period. <h2>Stacked line series</h2> Line series can easily be stacked by setting a single property: <code>stacked</code>. That's it - the chart will take care of the rest. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Stacking"]More about stacking series[/amb] <h2>Toggling and pre-hiding series</h2> Series can be easily toggled via legend. A series can also start as pre-hidden if you set its <code>hidden</code> property to <code>true</code>. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Pre_hiding_series"]More about pre-hiding series[/amb] <h2>Vertical ranges and guides</h2> Any axis can contain vertical bands or guide lines added, with an optional label, to indicate certain ranges or points in the chart. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/"]More about axis ranges and guides[/amb] <h2>HTML tooltips</h2> When displaying a lot of rich information in a tooltip, sometimes SVG is not enough. In those cases, like in this demo, we can opt for an HTML-enabled tooltip, setting <code>tooltipHTML</code>. [amb href="https://www.amcharts.com/docs/v4/tutorials/tooltips-with-rich-html-content/"]More info about HTML tooltips[/amb]

  • Dynamic Data Updates on Treemap

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

  • Dynamic Data Updates on Treemap

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

  • Line graph

    Line graph (also known as Line chart) displays series of data points connected by straight line segments. Line graphs are often used to display time series chronologically with category axis (usually horizontal x-axis) serving as an evenly spaced date-time scale.

  • Multi-series map

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

  • Multi-series map

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

  • Drill-down Treemap

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

  • Column and Line mix

    You can use our <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/">XYChart</a> to mix and match various types of two-dimensional charts - line, bar, column, area, candlestick, OHLC, etc. The most common combination is the column and line chart.

  • Variance indicators

    A clever use of highly configurable clustered Column series and adapters allows automatically-calculated variance indicators.

  • euzc9nb4

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

  • amcharts4 layout issue

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

  • Pie Chart With Legend

    <h2>Legend</h2> Legend in charts is completely automated. You just add it and the chart takes care of the rest, including generating items for each slice, as well as functionality to toggle/hover slices. The legend can also be placed anywhere on the chart, or even outside it. [amb href="https://www.amcharts.com/docs/v4/concepts/legend/"]More about legend[/amb] <h2>Hover state &amp; filters</h2> amCharts 4 comes with a garden variety of filters, such as drop shadow. This demos shows how we can add a drop shadow filter automatically to the hovered slice, using <code>"hover"</code> state. [amb href="https://www.amcharts.com/docs/v4/concepts/states/"]More about states[/amb]

  • Pie Chart With Legend

    <h2>Legend</h2> Legend in charts is completely automated. You just add it and the chart takes care of the rest, including generating items for each slice, as well as functionality to toggle/hover slices. The legend can also be placed anywhere on the chart, or even outside it. [amb href="https://www.amcharts.com/docs/v4/concepts/legend/"]More about legend[/amb] <h2>Hover state &amp; filters</h2> amCharts 4 comes with a garden variety of filters, such as drop shadow. This demos shows how we can add a drop shadow filter automatically to the hovered slice, using <code>"hover"</code> state. [amb href="https://www.amcharts.com/docs/v4/concepts/states/"]More about states[/amb]

  • 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

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