JSFiddle

Rogério's public fiddles

  • Column and Line mix

    You can use our <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/">XYChart</a> to mix and match various types of two-dimensional charts - line, bar, column, area, candlestick, OHLC, etc. The most common combination is the column and line chart.

  • Line With Custom Bullets

    <h2>Anything can be a bullet</h2> Besides pre-defined shapes, bullet can be anything in amCharts 4 - an SVG image or path, static image, another complex shape - even another chart. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More information about bullets[/amb]

  • Line With Custom Bullets

    <h2>Anything can be a bullet</h2> Besides pre-defined shapes, bullet can be anything in amCharts 4 - an SVG image or path, static image, another complex shape - even another chart. [amb href="https://www.amcharts.com/docs/v4/concepts/bullets/"]More information about bullets[/amb]

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

  • Line With Changing Color

    <h2>Alternating line color via data</h2> amCharts 4 brings a powerful concept - property fields, which allows binding any property of the Line series segment to values in data. Once a property, say a color, is overridden via data, the Line series remembers it and continues coloring subsequent segments in the same color. [amcharts2_button href="https://www.amcharts.com/docs/v4/concepts/data/#Property_fields"]More about property fields[/amcharts2_button]

  • amcharts Column with images

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

  • Zoomable Value Axis

    <h2>Zoomable in any direction</h2> The chart can support zooming in any direction. For that it has two properties: <code>scrollbarX</code> and <code>scrollbarY</code>. Both can be set with an instance of a Scrollbar, and configured individually. [amcharts2_button href="<a href="https://www.amcharts.com/docs/v4/concepts/axes/#Zooming">https://www.amcharts.com/docs/v4/concepts/chart-cursor/</a>"]More about zooming of axes[/amcharts2_button] <h2>Zooming with cursor</h2> Chart cursor can be set up to perform a plethora of tasks. In this demo we have set cursor's <code>behavior</code> to <code>"zoomY"</code> which means that cursor will select and zoom vertically. [amcharts2_button href="https://www.amcharts.com/docs/v4/concepts/chart-cursor/"]More about chart cursor[/amcharts2_button]

  • One Country morphing to another

    Implement visually stunning geographic reports with amCharts 4 and a little bit of magic. Check out the source code below and <a href="https://css-tricks.com/making-movies-with-amcharts/">this tutorial</a> for guidance on how to implement similar effects in your own visualizations.

  • 3D Column Chart

    Use <code><a href="https://www.amcharts.com/docs/v4/reference/xychart3d/">XYChart3D</a></code> class to create <a href="https://www.amcharts.com/docs/v4/chart-types/xy-chart/#Going_3D">faux-3D XY charts</a>. In this example, we use <code><a href="https://www.amcharts.com/docs/v4/reference/columnseries3d/">ColumnSeries3D</a></code> to create a 3D column chart.

  • Scaling the X and Y dimensions together

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

  • Mixed daily and intra-day chart

    You can mix different data of different periods in our charts. Be it line graphs or column graphs, it is all done very easily.

  • Smoothed Line Chart

    Line graph can be smoothed / rounded / curved to avoid jagged edges, especially if your data is very noisy. You can simply convert this smoothed-line graph to a smoothed-area graph by setting fill opacity of a graph to some bigger than zero value. <h2>Line color changing at negative values</h2> As you see, the line graph can use different color for it's positive and negative part. And even more - line color can change at user defined value - you can set any <strong>negativeBase</strong> you want.

  • Line with different colors for ups and downs

    As you see, the line graph can use different color for ups and downs. If previous value is bigger than current value, the line will use <strong>negativeLineColor</strong>. This feature can also be used with <strong>step </strong>and <strong>column </strong>graphs. To use it, you must set <strong>useNegativeColorIfDown </strong>to true. In case you define <strong>openField</strong> for the graph, values will be compared to <strong>openField</strong> instead of previous values.

  • Multi-series map

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

  • Column chart with images on top

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

  • Animated gauge

    This demo shows how to implement dynamic, good-looking dashboards. The gradient fill of the GaugeBand is achieved via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#gradientRatio"><code>gradientRatio</code></a> setting. The arrow and band angle is updated via <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeArrow#setValue"><code>setValue()</code></a> and <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setStartValue"><code>setStartValue()</code></a> / <a href="http://docs.amcharts.com/3/javascriptcharts/GaugeBand#setEndValue"><code>setEndValue()</code></a> API functions respectively.

  • Column chart with images on top

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

  • Layered Column Chart

    In some scenarios, showing multiple column series side-by-side (clustered) is the best and most "standard" way to display multiple column series. However, when each series has equal and fairly limited number of items, layering series on top of each other presents a much more impactful visualization. To achieve that with amCharts 4, you just disable clustering on each series (<code>series.clustered = false</code>) and then make columns in one of them wider (or narrower) than the other (<code>series2.columns.template.width = am4core.percent(50)</code>).

  • CSS3 Pyramid

    A Pyramid made using CSS3 borders

  • Column With Rotated Series

    As you might have a lot of series on the axis, labels can be rotated so that they would all fit. You can rotate them by any degree you want. In case you don't want rotated labels, they can wrap or some of the labels might be omitted. <h2>Animated columns</h2> The columns can be animated, we offer several animation effects to choose. Animation can be sequenced (one column appears after another) or they can all grow together. Besides the height, opacity can also be animated - the columns can fade-in.