amcharts's public fiddles
-
#9863
No-Library (pure JS), HTML, CSS, JavaScript
-
Programatically centering the map to selected object
No-Library (pure JS), HTML, CSS, JavaScript
-
Stock events on multiple dataset stock chart
No-Library (pure JS), HTML, CSS, JavaScript
-
#9777
No-Library (pure JS), HTML, CSS, JavaScript
-
#9771
No-Library (pure JS), HTML, CSS, JavaScript
-
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.
-
Stacked Area
Our Serial chart supports stacked or <a href="/demos/100-stacked-area-chart/">100% stacked</a> areas. Technically, area graph is just a regular line graph with fill opacity set to some bigger than 0 value. This means you can easily switch from area to line only by modifying this property. And even more - you can simply change this area to smoothed-area or step-area chart by changing a single <strong>type</strong> property of <a href="http://docs.amcharts.com/3/javascriptcharts/AmGraph">AmGraph</a>. <h2>Hidden graphs</h2> Legend of our charts allows showing/hiding graphs by clicking on the legend item you want to hide or show. You can also define which of the graphs are hidden by default - notice, the "cars" graph is hidden at the moment the chart is loaded and you can show it if you click it's legend marker. <h2>Vertical lines and fills</h2> You can fill the area between two categories with some color, add annotation to it using Guides. The same guides are used to create a single-lines to mark some event. Guides can be added to both category and value axes.
-
Stacked Bar Chart
Technically, this chart is exactly the same as <a href="/demos/stacked-column-chart/">Stacked Column Chart</a> with a single property, <strong>rotate</strong> set to <strong>true</strong>. Our charts do rotate that easily! <h2>HTML in the tool-tip</h2> If you roll-over any column, you will see a nicely formatted text in the tool-tip. Our tool-tips allow any HTML text so you can format the text in any way you want, add images or other HTML elements.</h2>
-
#9709
No-Library (pure JS), HTML, CSS, JavaScript
-
#9665
No-Library (pure JS), HTML, CSS, JavaScript
-
#9665
No-Library (pure JS), HTML, CSS, JavaScript
-
Coloring XY chart bubbles based on their value
No-Library (pure JS), HTML, CSS, JavaScript
-
Use custom images as bubbles on XY chart
No-Library (pure JS), HTML, CSS, JavaScript
-
Use custom images as bubbles on XY chart
No-Library (pure JS), HTML, CSS, JavaScript
-
Use custom images as bubbles on XY chart
No-Library (pure JS), HTML, CSS, JavaScript
-
#9681
No-Library (pure JS), HTML, CSS, JavaScript
-
Synchronise dataset dates with each other
jQuery Compat (edge), HTML, CSS, JavaScript
-
Synchronise dataset dates with each other
jQuery Compat (edge), HTML, CSS, JavaScript
-
Dynamically manage datasets and panels
jQuery Compat (edge), HTML, CSS, JavaScript
-
#9665
No-Library (pure JS), HTML, CSS, JavaScript