JSFiddle

pythk's public fiddles

  • Tag cloud

    Tag cloud (or word cloud, or weighted list) is a visual representation of text data where tag size shows the frequency of the tag in some data set. Learn how to build Tag clouds with amCharts 4 in <a href="https://www.amcharts.com/docs/v4/chart-types/wordcloud/">this extensive article</a>.

  • Nested donut chart

    Nested donut chart (also known as Multi-level doughnut chart, Multi-series doughnut chart) allows you to display multiple series in a single visualization. The series are usually related but represent different categories or slices of data (like the distribution of some category values over different years, etc.) <h2>Support for multiple series</h2> You can add any number of pie series to the pie chart. The chart will automatically nest them dividing available radius between each series, creating nested donuts. [amb href="https://www.amcharts.com/docs/v4/chart-types/pie-chart/#Nested_donut_charts"]More about nested donut charts[/amb]

  • FAIR Solid Gauge - MINI

    Solid Gauge Chart is similar to the <a href="https://www.amcharts.com/demos/angular-gauge/">Angular Gauge Chart</a> and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

  • FAIR Solid Gauge - MAXI

    Solid Gauge Chart is similar to the <a href="https://www.amcharts.com/demos/angular-gauge/">Angular Gauge Chart</a> and is most commonly used to mimic real-world gauges. The main difference from the Angular Gauge Chart is that the values are displayed by a filled portion of a gauge scale rather than a hand of a mechanical-like gauge.

  • Vertically stacked axes chart

    The chart above is a regular, single XY chart (although it might look like a multi-panel) chart with two value axes. We have a <a href="https://www.amcharts.com/demos/multiple-value-axes/">similar chart here</a>. The only real difference is that instead of arranging Y axes side by side we stack them one above another. So the result is quite the same as a multiple-panel chart with shared x-axis. And this is done by simply setting: <code>chart.leftAxesContainer.layout = "vertical"</code> We told you, amCharts 4 was awesome! For more gritty details about stacked, examples, and code visit <a href="https://www.amcharts.com/docs/v4/tutorials/stacked-axes/">this tutorial</a>.

  • Collapsible force-directed tree

    Force Directed Tree is a special kind of chart used to display of multi-item data related in hierarchical, linear or mixed way, as a series of linked bubbles. This demo shows how to implement collapsing and expanding of tree nodes in a force-directed tree. For a deep dive into force-directed tree charts check out the <a href="https://www.amcharts.com/docs/v4/chart-types/force-directed/">Anatomy of Force Directed Tree</a> in amCharts 4 documentation.

  • Waterfall Chart

    Waterfall Chart (also known as Flying bricks chart, Mario chart, Cascade chart) is most frequently used to display the effect of the series of consecutive positive or negative events on the initial value. <h2>Mixed series types</h2> amCharts 4 allows mixing a number of different series on the same chart. This particular Waterfall chart is enabled by combining a floating Column series and a no-riser Step series. Flexible line start and end location setting enables fine-tuning connector line position for perfect fit. [amcharts2_button href="https://www.amcharts.com/docs/v4/tutorials/building-a-waterfall-chart/"]More about making a waterfall chart[/amcharts2_button]

  • Flower chart

    Flower chart, Also known as filled radar chart.

  • Gauge with bands

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

  • Live data

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

  • Radar Chart

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

  • Radar Chart

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

  • 100% Stacked Column Chart

    100% stacked column or bar chart is a good way to display some categories of a whole changing over time. For example, a company may use 100% stacked column chart to display what product lines contributed to its revenue by calendar quarter. The downside is that in such a chart it is quite difficult to visually compare the changes over time (except for the first item/series).

  • Line chart with range slider

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

  • 100% stacked area chart

    <h2>Using calculated values for series</h2> In amCharts 4, Series can be drawn from a variety of auto-calculated values, not necessarily the absolute ones. In this case, we are setting <code>valueYShow</code> data field to <code>"totalPercent"</code> which is an auto-calculated value, producing a 100% stack chart. [amb href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#100_stacks"]More info about 100% stacks and "show" data fields[/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]

  • Simple Treemap

    Simple Treemap displays hierarchical data in the shape of rectangles proportional in size to their value as part of the whole. Each rectangle, in turn, can be divided into sub-items according to the values of its children in the hierarchy.

  • Box plot chart

    Box plot chart (also know as boxplot, box-and-whisker plot, box-and-whisker diagram) is a way of displaying statistical data based on five numbers: minimum, first quartile (25th percent), median, third quartile (75th percent) and maximum.

  • 41u3onsk

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

  • 04k83bwu

    jQuery 1.7.2, HTML, CSS, JavaScript

  • Area With Time Based Data

    <h2>Zooming via API</h2> Charts provide a strong API that can modify any aspect of the chart on the fly. You can use <code>zoom()</code> method to zoom the dateAxis. Or, if you want the it to be pre-zoomed intially, you can set <code>dateAxis.start</code> and <code>dateAxis.end</code> values. [amb href="https://www.amcharts.com/docs/v4/tutorials/pre-zooming-an-axis/"]More about pre-zooming the chart[/amb]