JSFiddle

pythk's public fiddles

  • Line with different negative color

    <h2>Axis ranges</h2> Axis ranges allow defining a scope of values, or a stretch between categories, or dates. Any property of the segment of the series that falls into that range can be overridden. This demo shows how we can color any segment of the line below the zero line with an alternative color. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Using_with_series"]More about using axis ranges with series[/amb] <h2>Date axis</h2> Date axis is perfect for depicting date/time-based data on a natural scale. [amb href="https://www.amcharts.com/docs/v4/concepts/axes/#Date_axis"]More about date axis[/amb]

  • Variable-width curved column chart

    In this demo column width depends on the value and columns are sorted so that the ones with the lowest value are on top and always visible.

  • Variable-width curved column chart

    In this demo column width depends on the value and columns are sorted so that the ones with the lowest value are on top and always visible.

  • Stacked Column Chart

    Stacked bar charts are useful to demonstrate how a larger data category is comprised of smaller categories, and what part each of the smaller categories plays in the total of a larger one.

  • AFRICA CRISIS MAP2

    This demo shows how a country map can be loaded dynamically when needed. Click on any colored country: the map will zoom in on it then load and display the country map for it. amCharts 4 comes with maps for over 170 countries, with new maps being added constantly.

  • LUP4LDN MAP

    This demo shows how a country map can be loaded dynamically when needed. Click on any colored country: the map will zoom in on it then load and display the country map for it. amCharts 4 comes with maps for over 170 countries, with new maps being added constantly.

  • Map with Bubbles

    Map with Bubbles (also known as Bubble Map Chart) is a variant of a <a href="https://www.amcharts.com/demos/bubble-chart/">bubble chart</a> where bubble location is determined by geographic location rather than Cartesian coordinates. The size of the bubble determines the value while its location is calculated automatically - the map finds the visual center of each country and places the bubble there.

  • jQDateRangeSlider (default ctor)

    jQuery 1.7.2, HTML, CSS, JavaScript

  • Gantt Chart

    Gantt charts are typically used to display schedules or other time-based activities. In a nutshell, Gantt chart is a variation of a bar chart with time-based horizontal axis and bars starting at arbitrary values rather than on the axis.

  • Gauge with bands

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

  • Live data

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

  • Stacked and Clustered Column Chart

    Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 4 you can combine both techniques to get the best of both worlds. An example would be displaying revenues by region (clustered chart) while at the same time including the composition of products that contributed to that revenue (stacked chart).

  • Stacked and Clustered Column Chart

    Stacked column charts are great for displaying the contributions of parts of a whole (eg. how much each product line contributed to the total revenue). Clustered column charts excel at being the most comprehensible while comparing the absolute values visually. With amCharts 4 you can combine both techniques to get the best of both worlds. An example would be displaying revenues by region (clustered chart) while at the same time including the composition of products that contributed to that revenue (stacked chart).

  • Map with Data

    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.

  • Split string into chunks at space

    Splits a string into chunks, but at a space.

  • Pie of a Pie (exploding pie chart)

    Two pie charts, one showing the drill-down data of a selected slice. Click on a slice of a big pie to explode/expand the slice. This chart type is sometimes called exploding pie chart.

  • Donut chart

    Donut Chart (also known as Doughnut chart) is a variation on a <a href="https://www.amcharts.com/demos/simple-pie-chart/">Pie chart</a> except it has a round hole in the center which makes it look like a donut, hence the name. This empty space can be used to <a href="https://www.amcharts.com/demos/animated-time-line-pie-chart/">display additional data</a>. <h2>Configurable inner radius</h2> To make a donut chart out of a regular pie chart, we simply need to set <code>innerRadius</code> property of the chart. It can either take relative percent value, or fixed pixel radius.

  • Sorted bar chart

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

  • JSON Query Parser

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

  • Map with pulsating bullets

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