# JSFiddle

## pythk's public fiddles

• ### Force-Directed Network

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. Learn everything you need to know about implementing force-directed trees with amCharts 5 in <a href="https://www.amcharts.com/docs/v5/charts/hierarchy/force-directed/">this extensive guide</a>.

• ### 17dcr2gz

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

• ### Pie chart

author(s): Torstein Hønsi

• ### Histogram

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

• ### LUP4LDN ECON-WOCAT

Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 4 you can combine both techniques to get the best of both worlds. An example would be displaying revenues by region (clustered chart) while at the same time including the composition of products that contributed to that revenue (stacked chart).

• ### Risk Heatmap

<h2>Two-dimensional category axes</h2> Both axes on this chart is a category axis. This allows placing columns precisely as squares. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Category_axis"]More about category axes[/amb] <h2>Data-aware bullets</h2> Bullets inside squares are bullets. Labels inside bullets are bound to the actual values in data. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More about bullets[/amb] <h2>Heat rules</h2> Heat rules allow modifying element's properties based on its related value in data. Those are not limited to colors. Any quantifiable value can be used in a heat rule, like for instance, a radius of a bullet on this chart. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Heat_maps"]More about heat rules[/amb]

• ### Heat map with Legend

Heat map (also known as Heatmap, Heat table, Shading matrix) represents data in a rectangular matrix where individual values are differentiated by color. <h2>Heat rules</h2> Heat rules allow modifying element's properties based on its related value in data, like for instance, color of the columns on this charts. [amb href="https://www.amcharts.com/docs/v4/concepts/series/#Heat_maps"]More about head rules[/amb] <h2>Heat legend</h2> A perfect companion for any color-based heat maps, a head legend can show the spectrum of values and their relation to colors. Furthermore, utilizing chart events, it's possible to further enhance UX by showing exact position of hovered element in the whole spectrum. [amb href="https://www.amcharts.com/docs/v4/concepts/legend/heat-legend/"]More about head legend[/amb]

• ### Line with different negative color

<h2>Axis ranges</h2> Axis ranges allow defining a scope of values, or a stretch between categories, or dates. Any property of the segment of the series that falls into that range can be overridden. This demo shows how we can color any segment of the line below the zero line with an alternative color. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Using_with_series"]More about using axis ranges with series[/amb] <h2>Date axis</h2> Date axis is perfect for depicting date/time-based data on a natural scale. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Date_axis"]More about date axis[/amb]

• ### Variable-width curved column chart

In this demo column width depends on the value and columns are sorted so that the ones with the lowest value are on top and always visible.

• ### Variable-width curved column chart

In this demo column width depends on the value and columns are sorted so that the ones with the lowest value are on top and always visible.

• ### Stacked Column Chart

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.

• ### AFRICA CRISIS MAP2

This demo shows how a country map can be loaded dynamically when needed. Click on any colored country: the map will zoom in on it then load and display the country map for it. amCharts 4 comes with maps for over 170 countries, with new maps being added constantly.

• ### LUP4LDN MAP

This demo shows how a country map can be loaded dynamically when needed. Click on any colored country: the map will zoom in on it then load and display the country map for it. amCharts 4 comes with maps for over 170 countries, with new maps being added constantly.

• ### Map with Bubbles

Map with Bubbles (also known as Bubble Map Chart) is a variant of a <a href="https://www.amcharts.com/demos/bubble-chart/">bubble chart</a> where bubble location is determined by geographic location rather than Cartesian coordinates. The size of the bubble determines the value while its location is calculated automatically - the map finds the visual center of each country and places the bubble there.

• ### jQDateRangeSlider (default ctor)

jQuery 1.7.2, HTML, CSS, JavaScript

• ### Gantt Chart

Gantt charts are typically used to display schedules or other time-based activities. In a nutshell, Gantt chart is a variation of a bar chart with time-based horizontal axis and bars starting at arbitrary values rather than on the axis.

• ### Gauge with bands

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

• ### Live data

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

• ### Stacked and Clustered Column Chart

Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 4 you can combine both techniques to get the best of both worlds. An example would be displaying revenues by region (clustered chart) while at the same time including the composition of products that contributed to that revenue (stacked chart).

• ### Stacked and Clustered Column Chart

Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 4 you can combine both techniques to get the best of both worlds. An example would be displaying revenues by region (clustered chart) while at the same time including the composition of products that contributed to that revenue (stacked chart).