{"id":21377,"date":"2017-11-05T12:20:59","date_gmt":"2017-11-05T12:20:59","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=21377"},"modified":"2026-01-12T09:33:01","modified_gmt":"2026-01-12T09:33:01","slug":"speedometer-with-animation","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/speedometer-with-animation\/","title":{"rendered":"Speedometer with Animation"},"content":{"rendered":"<p>&nbsp;<br \/>\nThe speedometer gauge is popular chart type for dashboards, as it is well suited to display performance.<\/p>\n<p>In this example you\u2019ll learn how to generate this chart, and subsequently, animate the needle (indicator). <\/p>\n<p>The animation is achieved by creating and updating the value of the indicator. The value is calculated using <code>Math.round()<\/code>, then feature <code>point.update()<\/code> updates the indicator\u2019s value.<\/p>\n<p class=\"demo-container\">\n<iframe height=\"400\" style=\"width: 100%;\" scrolling=\"no\" title=\" Speedometer with Animation\" src=\"https:\/\/codepen.io\/mushigh\/embed\/QWMQJrV?default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/QWMQJrV\"><br \/>\n   Speedometer with Animation<\/a> by mustapha mekhatria (<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe>\n<\/p>\n<p><\/p>\n<p>Learn more about <a href=\"http:\/\/api.highcharts.com\/highcharts\/Point.update\">point.update<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; The speedometer gauge is popular chart type for dashboards, as it is well suited to display performance. In this example you\u2019ll learn how to generate this chart, and subsequently, animate the needle (indicator). The animation is achieved by creating and updating the value of the indicator. The value is calculated using Math.round(), then feature [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":21460,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[699],"class_list":["post-21377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=21377"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21377\/revisions"}],"predecessor-version":[{"id":29108,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21377\/revisions\/29108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21460"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21377"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}