JSFiddle

amcharts's public fiddles

  • Trend Lines

    <!-- wp:paragraph --> <p>You can create real analytical trendlines, indicators, and other annotations with <a href="https://www.amcharts.com/stock-chart/">amCharts Stock Chart</a> but when you need something simple you can just use the core tools at your disposal in the XY Charts.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Key implementation details</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>To imitate trendlines we simple add extra line series with just two data points at the ends of the line.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Related tutorials</h2> <!-- /wp:heading --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/">XY Chart</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/">Line series</a></li> <!-- /wp:list-item --></ul> <!-- /wp:list -->

  • Trend Lines

    <!-- wp:paragraph --> <p>You can create real analytical trendlines, indicators, and other annotations with <a href="https://www.amcharts.com/stock-chart/">amCharts Stock Chart</a> but when you need something simple you can just use the core tools at your disposal in the XY Charts.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Key implementation details</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>To imitate trendlines we simple add extra line series with just two data points at the ends of the line.</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2>Related tutorials</h2> <!-- /wp:heading --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/">XY Chart</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://www.amcharts.com/docs/v5/charts/xy-chart/series/line-series/">Line series</a></li> <!-- /wp:list-item --></ul> <!-- /wp:list -->

  • 3D Cylinder Chart

    amCharts 4 includes a <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Going_3D">3D variant of XYChart</a> called <a href="https://www.amcharts.com/docs/v4/reference/xychart3d/">XYChart3D</a>. With <a href="https://www.amcharts.com/docs/v4/reference/coneseries/">ConeSeries</a> we can easily create a bar chart with cylinder-like bars.

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

  • m8p5cjvz

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

  • 9pxe18th

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

  • an1y2073

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

  • AMcharts4 donut

    donut with slice pulled

  • Timeline

    This demo uses amCharts 4 TimeLine add-on. This type of chart is sometimes called a linear process diagram. [amb href="https://www.amcharts.com/timeline-chart/"]More info about TimeLine addon[/amb] [amb href="https://www.amcharts.com/docs/v4/chart-types/timeline/"]Add-on docs[/amb]

  • 95zsa8vw

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

  • xj63nLu1

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

  • sc2zye3o

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

  • AmChartsV4 Legend Marker Stroke issue

    https://github.com/amcharts/amcharts4/issues/279

  • Simple Column Chart

    Column Chart (also known as vertical bar chart) is one of the most common and, arguably, the easiest to read chart type when it comes to visualizing category-based values. Rectangular bars are placed along the category axis with bar length representing the value for a specific category.

  • stoke + overlap

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

  • stoke + overlap

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

  • Highlighting line chart series on legend hover

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

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

  • Multi-series map

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

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