JSFiddle

Rohit's public fiddles

  • Horizontal and vertical Scroll-able table in Bootstrap

    Horizontal and vertical Scroll-able table in Bootstrap

  • Try 1

    jQuery 3.3.1, HTML, CSS, JavaScript

  • Try 1

    jQuery 3.3.1, HTML, CSS, JavaScript

  • Nested donut chart

    Nested donut chart (also known as Multi-level doughnut chart, Multi-series doughnut chart) allows you to display multiple series in a single visualization. The series are usually related but represent different categories or slices of data (like the distribution of some category values over different years, etc.) <h2>Support for multiple series</h2> You can add any number of pie series to the pie chart. The chart will automatically nest them dividing available radius between each series, creating nested donuts. [amb href="https://www.amcharts.com/docs/v4/chart-types/pie-chart/#Nested_donut_charts"]More about nested donut charts[/amb]

  • Try 1

    jQuery 3.3.1, HTML, CSS, JavaScript

  • Try 1

    jQuery 3.3.1, HTML, CSS, JavaScript

  • US heat (choropleth) map

    Using our mapping tool you can easily create heat (or as BI-centric folks like to call it, <a href="https://en.wikipedia.org/wiki/Choropleth_map">choropleth</a>) maps. You only need to set light and dark color, and if your areas/countries/states has value assigned, the map will automatically choose intermediate color corresponding its value.

  • Location-sensitive map

    This demo uses proprietary web service (based on <a href="https://www.maxmind.com/en/geoip2-services-and-databases">MaxMind's IP data base</a>) to determine location of the visitor and serve appropriate heat map. <h2>Dynamic map loading</h2> The chart can load maps in GeoJSON format dynamically using built-in loader. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Loading_external_maps"]More about loading external maps[/amb]

  • Location-sensitive map

    This demo uses proprietary web service (based on <a href="https://www.maxmind.com/en/geoip2-services-and-databases">MaxMind's IP data base</a>) to determine location of the visitor and serve appropriate heat map. <h2>Dynamic map loading</h2> The chart can load maps in GeoJSON format dynamically using built-in loader. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Loading_external_maps"]More about loading external maps[/amb]

  • 1bkxa7gm

    jQuery 3.3.1, HTML, CSS, JavaScript

  • Column chart with axis break

    <h2>Axis breaks</h2> Axis breaks allows shrinking part of the axis scale. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Breaks"]More about axis breaks[/amb]

  • Column chart with axis break

    <h2>Axis breaks</h2> Axis breaks allows shrinking part of the axis scale. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Breaks"]More about axis breaks[/amb]

  • Weather map

    <h2>Composite map markers</h2> This demo showcases how you can combine several elements into a single map marker. In this case we combine an animated SVG image and a text label. They are placed at certain coordinates and therefore move with map.

  • Location-sensitive map

    This demo uses proprietary web service (based on <a href="https://www.maxmind.com/en/geoip2-services-and-databases">MaxMind's IP data base</a>) to determine location of the visitor and serve appropriate heat map. <h2>Dynamic map loading</h2> The chart can load maps in GeoJSON format dynamically using built-in loader. [amb href="https://www.amcharts.com/docs/v4/chart-types/map/#Loading_external_maps"]More about loading external maps[/amb]

  • Drill-down Map

    Click on any continent - the map will be zoomed-in and then a country-level map will be displayed. You can easily create drill-down maps using our product.

  • Capitals map

    Our maps can be used with real life latitudes and longitudes. All the capitals on this map are placed using the actual coordinates of these cities.

  • Flight Page Design

    jQuery 3.3.1, HTML, CSS, JavaScript

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

  • 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, <code>rotate</code> set to <code>true</code>. 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.

  • Funnel chart

    Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. By default, the height of a slice represents it's value. However you might want the area of a slice to represent value. In this case you should add <code>"valueRepresents":"area"</code> property to the chart's config. The height and width of a neck is controlled by <code>neckWidth</code> and <code>neckHeight</code> properties. <h2>Funnel chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our Funnel chart supports patterns. There are several pre-built patterns in our package or you can easily build your own fancy patterns and use them with our charts.