JSFiddle

pythk's public fiddles

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Line chart with range slider

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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]

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 41u3onsk

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 04k83bwu

  jQuery 1.7.2, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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]

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• cng8wh3b

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

• Private fiddle Extra
• Delete fiddle
Groups Extra
• 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>.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Step Line Chart

  Step Line Chart (also known as Step Chart, Stepped Line Chart) is useful when you want to show changes happening at specific points. In contrast to Line Chart, which connects data points with the shortest possible line thus creating an appearance of values changing gradually, Step Line Chart highlights that values change discretely at specific points.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Drill-down to countries

  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.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• ah98swov

  jQuery 3.1.1, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Highcharts Demo

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Area range

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Area range and line

  author(s): Torstein Hønsi

• Private fiddle Extra
• Delete fiddle
Groups Extra
• ab59uj4g

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

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 2
• 3
• 4
• 5
• ▶︎
• 6