JSFiddle

HemalathaThanigaivel's public fiddles

  • Highcharts Demo

    author(s): Torstein Hønsi

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

  • Donut chart

    Donut or Doughnut chart is just a simple pie chart with a hole inside. You can define hole radius to any size you need, both in percent or pixels. <h2>Donut chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our pie or donut 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.

  • Donut chart

    Donut or Doughnut chart is just a simple pie chart with a hole inside. You can define hole radius to any size you need, both in percent or pixels. <h2>Donut chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our pie or donut 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.

  • Stacked Column Chart

    Our Serial chart can stack any graphs of the same kind - columns, bars, lines, step lines. They can be stacked in a regular way or 100%, when values are recalculated to percent values. <h2>Themes - a real help for developer</h2> View the source of the chart by clicking EDIT button. You will notice, that not a single color is defined in it. Now, if you click themes buttons on top of the chart, you will see that the chart is changing colors, opacities and evem patterns. All the config of the chart is stored in the theme file which is applied when you click a button. This feature allows you to apply a theme for all your charts on a web site, and you will be sure that they will meet the same design. We offer several themes for your to choose, and you can easily modify and adjust them for your needs. And of course, you can still set any property as an exception in the chart config file.

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

  • jffhf97c

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

  • Lwajj7ze

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

  • oqLgv8ce

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

  • axhfmpqf

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

  • Vertical Line Chart

    Using Serial chart, you can have rotated or vertical line chart by setting a single property <strong>rotate</strong> to <strong>true</strong>. And of course, this chart can have any categories on category axis - both dates and strings. <h2>Fill plot area with colors</h2> You can fill plot area with both horizontal or vertical fills using <a href="http://docs.amcharts.com/3/javascriptcharts/Guide">Guides</a>.

  • Stacked Column Chart

    Our Serial chart can stack any graphs of the same kind - columns, bars, lines, step lines. They can be stacked in a regular way or 100%, when values are recalculated to percent values. <h2>Themes - a real help for developer</h2> View the source of the chart by clicking EDIT button. You will notice, that not a single color is defined in it. Now, if you click themes buttons on top of the chart, you will see that the chart is changing colors, opacities and evem patterns. All the config of the chart is stored in the theme file which is applied when you click a button. This feature allows you to apply a theme for all your charts on a web site, and you will be sure that they will meet the same design. We offer several themes for your to choose, and you can easily modify and adjust them for your needs. And of course, you can still set any property as an exception in the chart config file.

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Highcharts Demo

    author(s): Torstein Hønsi

  • Donut with radial gradient

    Using property <strong>gradientRatio</strong> you can achieve any gradient you want. This particular chart uses the following gradient ratio: <strong>[-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5]</strong> Negative value means the color will be darker than the original, and positive number means the color will be lighter. <strong>gradientRatio</strong> array can be of any length you want, depending on a gradient you want to achieve. Pie chart also supports linear gradient. To enable it set <strong>gradientType</strong> to <strong>linear</strong>. However, radial gradients would look much better.

  • Highcharts Demo - JSFiddle

    author(s): Torstein Hønsi

  • Donut with radial gradient

    Using property <strong>gradientRatio</strong> you can achieve any gradient you want. This particular chart uses the following gradient ratio: <strong>[-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5]</strong> Negative value means the color will be darker than the original, and positive number means the color will be lighter. <strong>gradientRatio</strong> array can be of any length you want, depending on a gradient you want to achieve. Pie chart also supports linear gradient. To enable it set <strong>gradientType</strong> to <strong>linear</strong>. However, radial gradients would look much better.

  • s0awfhjb

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

  • Angular Gauge

    Angular Gauge, or Speedometer chart is mostly used to show data which is shown using similar gauges in real life, like speed, volume equalizer, clock, etc. Our Angular Gauge chart can display multiple axes, multiple arrows, also show color bands on the axis.