# JSFiddle

## pythk's public fiddles

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

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

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]

• ### Historical population pyramid

A population pyramid, also called an "age-sex-pyramid" or "mirror bar chart", is a graphical illustration that shows the distribution of various age groups in a population. By combining and linking the pyramid with a <a href="https://www.amcharts.com/demos/stacked-area/">stacked area chart</a> we are able to create a compact and interactive visualization covering a lot of historical date.

• ### Range area chart

Range Area Chart is a type of area chart where rather than starting on the axis, the area is represented by the space between two values. These charts are useful for displaying ranges of values, such as between minimum and maximum prices over a timespan, or projected values for the future when the projection is represented by a range instead of a specific value.