{"id":20900,"date":"2021-06-09T15:05:35","date_gmt":"2021-06-09T14:05:35","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=20900"},"modified":"2026-01-13T11:20:20","modified_gmt":"2026-01-13T11:20:20","slug":"drawing-plotbands-with-limits-using-annotations-part-1","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/drawing-plotbands-with-limits-using-annotations-part-1\/","title":{"rendered":"Drawing plot bands with limits using annotations (Part 1)"},"content":{"rendered":"<p>Highcharts allows you to render plot bands and plot lines highlighting zones or values on an axis. <a href=\"https:\/\/www.highcharts.com\/docs\/chart-concepts\/plot-bands-and-plot-lines\">Read more in the docs<\/a>.<\/p>\n<p>This article will show you how you can draw plot bands on your chart and limit them to not span across the whole axis range. <\/p>\n<p>In basic plot band and plot line usage, the lines are drawn across the entire opposite axis. Even though you can change how they are plotted using plugins (like in demo below), the annotations module allows you to use this functionality out of the box, and here is how to do it.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"470\" src=\"\/\/jsfiddle.net\/BlackLabel\/fLb372ra\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\" title=\"A line chart displays random data with an annotation\"><\/iframe>\n<\/p>\n<p>First things first, you need to import the annotations module with this link: <\/p>\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/modules\/annotations.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Next, jump straight into plotting the plot bands. Start with the basic demo, where the only thing that is plotted is a basic line series. Then, define the annotations configuration object. <\/p>\n<p>As listed in the <a href=\"https:\/\/api.highcharts.com\/highcharts\/annotations\">anotations API reference<\/a>, everything is pretty straightforward. The <code>Annotations<\/code> property is an array of objects defining the following groups of annotations. Each group can have its own properties defined, where the most important are an array of labels and an array of shapes. In the <code>shapes<\/code> object we need to specify the following things:<\/p>\n<ul>\n<li>type: <code>path<\/code> &#8211; this option will allow you to draw the shape from the points defined in the next option<\/li>\n<li><code>points<\/code> &#8211; array of objects, where we will specify exact coordinates of the plotBand. Each point consists of the following properties:\n<ol>\n<li><code>x<\/code> &#8211; the value point in x coordinates. If the <code>xAxis<\/code> property is defined, this value defines the <code>xAxis<\/code> coordinates. If not, this is a pixel value.<\/li>\n<li><code>y<\/code> &#8211; same as above, but corresponding to the y coordinates.<\/li>\n<li><code>xAxis<\/code> &#8211; the index or the id of the <code>xAxis<\/code>, you want to refer to. (Remember, that there might be multiple axes, so you need to specify the exact axis). It can be left undefined, but then the x, and y properties values will be treated as pixel values.<\/li>\n<li><code>yAxis<\/code> &#8211; same as above, but regarding the <code>yAxis<\/code>.<\/li>\n<\/ol>\n<\/li>\n<li>Some additional properties, like <code>fill<\/code>, <code>stroke<\/code>, <code>zIndex<\/code> or anything that you like<\/li>\n<\/ul>\n<p>In this article, the labels are used only to distinguish the custom plot bands more easily.<\/p>\n<p>So now that everything is specified, the plot bands can be drawn!<\/p>\n<p>There is also great flexibility with creating labels in relation to the plot band shape that you are drawing. You can specify the exact point where the label should be rendered, its shape, position relative to this point, and much more! Everything, as always, is listed in the API reference.<br \/>\nAnd here is the demo:<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"500\" src=\"\/\/jsfiddle.net\/mushigh\/faw6n2je\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"title=\"A line chart displays random data with multiple annotations\"><\/iframe>\n<\/p>\n<p>And that\u2019s it!<br \/>\nLet us know if you find this article useful, and don\u2019t hesitate to reach out to us in the comments or in one of our support channels. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to draw plotBands with limits using annotations within Highcharts.<\/p>\n","protected":false},"author":264,"featured_media":20906,"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":[890],"class_list":["post-20900","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\/20900","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\/264"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20900"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20900\/revisions"}],"predecessor-version":[{"id":29349,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20900\/revisions\/29349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20906"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20900"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}