JSFiddle

Rogério's public fiddles

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

  • Horizontally stacked axes

    Similarly to <a href="https://www.amcharts.com/demos/vertically-stacked-axes-chart/">vertically stacked axes</a> you can stack them horizontally. It's a single XY chart with one shared Y axis and multiple value axes. Instead of arranging them one under another we arrange them horizontally. To do this, you simply set <code>chart.bottomAxesContainer.layout = "horizontal";</code>. You can specify custom width for each of the axes if you don't want them to be of the same width.

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

  • Trend Lines

    Trend lines are straight lines from one given category / value axis point to another. Trend lines are used to indicate the general changes over time, also as technical indicators in financial charts. In case you need a possibility to allow your users draw the trend lines, check <a href="/demos/drawing-trend-lines/">this Stock Chart example</a>. <h2>Infinite fills or lines</h2> For infinite lines or fills, crossing all plot area without start/end horizontally or vertically (notice the horizontal fill from 10 to 16), you can use <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a>.

  • Clustered Bar Chart

    Clustered bar chart is a chart when bars of a different graphs are placed next to each another, and not stacked one on another, so basically it's the most simple bar chart with two graphs in it. <h2>Bar chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our bar or column chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts. <h2>Hand-drawn style</h2> Click on CHALK theme above the chart - the bars will gain hand-drawn style, with non-straight lines. This is a very special feature of amCharts!

  • Column and Line mix

    Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

  • Column and Line mix

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

  • 3D Stacked Column Chart

    3D stacked columns are placed one behind another instead of placing them one on top of another (regular stacking or 100% stacking). This kind of stacking is limited to column graphs only, as only these graphs do support 3D look. You can stack more than two graphs, just remember to put the graphs with the highest values to the back, as otherwise thy will hide the graphs with smaller values.

  • Angular Gauge

    Anglular Gauges (also known as Speedometer Chart) are most commonly used to mimic the real-life gauges to display values like volume, temperature, speed, etc.

  • Pie Chart With Legend

    Pie chart can display titles and values of slices in the legend. Our legend has a great feature - if you click on legend entry, the slice will be hidden or shown. This might gives additional value for data analysis, as when hidden, slice is excluded when calculating percent values. The position of legend can be easily adjusted.

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

  • Column and Line mix

    Our serial chart supports a lot of graph types: line, area, smoothed line, step, column, candlestick, OHLC. All these types can go together in one chart - line with columns, columns with smoothed lines and similar. The real difference of these graphs is one property - <strong>type</strong>, except candlestick and OHLC graphs, of course, as they require 4 data fields instead of one. <h2>Use dashed lines for forecasts</h2> It's quite common that a line or column outline changes to dashed line/outline for the date which is not available yet, but could be forecast. It's very easy to do this with our charts. You simply set <strong>dashLengthField</strong> for your graph and then set the dash length in your data, at a point where graph should become dashed.

  • 3D Bar Chart

    Columns and bars in our charts can have a 3D look. You can adjust depth and angle to make them more deep - click EDIT button and play with depth3D and angle properties.

  • Simple Column Chart

    If you take a close look at this chart, you will notice that grid lines are above the columns - equally dividing them into segments. This is an optional feature, of course. It allows you creating the charts close to the ones described by famous data visualization guru, <a href="http://www.edwardtufte.com/">Edward Tufte</a>, in his book "The Visual Display of Quantitative Information". <h2>From columns to bars - one simple step</h2> Click EDIT button on top of the chart, and add this text to the source (anywhere within curly brackets): <strong>"rotate":true,</strong>. Run the script and... The columns should became bars, category axis should be vertical now and value axis - horizontal! This is the only property you change to make this trick. All our Serial charts can be rotated in the same way.

  • Pie Chart With Legend

    Pie chart can display titles and values of slices in the legend. Our legend has a great feature - if you click on legend entry, the slice will be hidden or shown. This might gives additional value for data analysis, as when hidden, slice is excluded when calculating percent values. The position of legend can be easily adjusted.

  • Waterfall Chart

    Here is an excerpt from Wikipedia: A waterfall chart is a form of data visualization that helps in determining the cumulative effect of sequentially introduced positive or negative values. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge. <h2>Making Waterfall with amCharts</h2> Although we don't have a special dedicated waterfall chart, you can easily do it with a regular column chart. Besides a regular value, column graph can have open value specified, which defines at which value column should start. And for the horizontal lines we used another great feature we have - <a href="http://docs.amcharts.com/3/javascriptcharts/TrendLine">Trend Lines</a>.