JSFiddle

amcharts's public fiddles

  • Map with Dynamic Pie Charts

    <h2>Complex map markers</h2> Map image series are not limited to simple shapes to be used as markers. Virtually anything can be used as marker, including other charts, as you can see on this demo. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Image_series"]More about map image series[/amb]

  • amcharts-height

    jQuery 2.1.3, HTML, CSS, JavaScript

  • Data grouping 50K points

    This demo shows how dynamic data item grouping - a feature built-in into amCharts 4 - can help coping with large data sets. In a nutshell it ensures that no more than a fixed number of data items is displayed at any given time. The chart itself automatically adjusts data granularity, grouping data items into bigger periods. When users zooms in, the granularity increases. This means that you can have a "bird's eye" view of the data when zoomed out without overwhelming number of items, and access detailed values for specific periods. And, best of all, you're in control when specifying how aggregate values are calculated. It can be one of the absolute values like open, high, low, or close, or auto-calculated ones, like average or sum. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/date-axis/#Dynamic_data_item_grouping"]Read more about data item grouping[/amb]

  • Data grouping 50K points

    This demo shows how dynamic data item grouping - a feature built-in into amCharts 4 - can help coping with large data sets. In a nutshell it ensures that no more than a fixed number of data items is displayed at any given time. The chart itself automatically adjusts data granularity, grouping data items into bigger periods. When users zooms in, the granularity increases. This means that you can have a "bird's eye" view of the data when zoomed out without overwhelming number of items, and access detailed values for specific periods. And, best of all, you're in control when specifying how aggregate values are calculated. It can be one of the absolute values like open, high, low, or close, or auto-calculated ones, like average or sum. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/date-axis/#Dynamic_data_item_grouping"]Read more about data item grouping[/amb]

  • f4dubxpt

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

  • ao9td7sx

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

  • amcharts-height

    jQuery 2.1.3, HTML, CSS, JavaScript

  • uz98gbka

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

  • xd9rLt57

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

  • 5yq68uam

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

  • Hold listener am charts

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

  • Step Line Without Risers

    <h2>Step start and end position control</h2> You can control exactly where within category/date each step starts and ends using series' <code>startLocation</code> and <code>endLocation</code>. [amb href="https://www.amcharts.com/docs/v4/tutorials/taming-the-step-line-series/"]More information about step series[/amb] <h2>Step series without risers</h2> Step line series can display just horizontal lines, without vertical connectors. For that just set its <code>noRisers</code> property to <code>false</code>. <h2>Series in a scrollbar</h2> The scrollbar used for zooming of the chart can depict a "small version" of chart's actual series. More than one series can be added to the scrollbar. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Scrollbar_with_preview"]More information about XY chart scrollbar[/amb]

  • Triangle column chart

    This is a variation of a regular column chart where triangles are used instead of rectangles. Technically this is the same as <a href="https://www.amcharts.com/demos/curved-columns/">curved-columns chart</a> with tension of curved column set to 1.

  • 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

  • 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