{"id":17618,"date":"2024-10-10T14:11:55","date_gmt":"2024-10-10T14:11:55","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17618"},"modified":"2024-10-17T10:26:27","modified_gmt":"2024-10-17T10:26:27","slug":"line-chart-annotations","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/10\/10\/line-chart-annotations\/","title":{"rendered":"JavaScript Line Chart with Annotations \u2014 JS Chart Tips"},"content":{"rendered":"

\"JavaScript<\/a>Annotations in charts, such as shapes or text markers, can greatly enhance data narratives by providing more context directly on the visual plane. Thus, it’s no surprise that the ability to add them is one of the most sought-after\u00a0features<\/a> of our JavaScript charting library<\/a>. Although typically used in\u00a0stock charts<\/a>, annotations can be just as effective in standard graphics for highlighting specific data points or trends. In this edition of JS Chart Tips<\/a>,\u00a0you’ll learn how to add annotations to a basic\u00a0line chart<\/a>.<\/p>\n

<\/p>\n

Question:\u00a0How to Add Annotations to Line Chart?<\/h2>\n

Some time ago, our Support Team<\/a> received a quick message\u00a0via the live chat attached throughout our website (you can find it in the bottom right corner \u2014 feel free to ask\u00a0anything anytime). The customer wondered whether annotations are supported in conventional line charts. Although no picture was attached, we assumed the request was for something like this:<\/p>\n

\"A<\/p>\n

It took just a few minutes to provide the customer with helpful links to the documentation and an illustrative example on AnyChart Playground<\/a>. We now invite you to see in detail how annotations can be added to your own non-stock line charts.<\/p>\n

Solution:\u00a0Displaying Annotations in JS Line Chart<\/h2>\n

Overview<\/h3>\n

After creating a line chart<\/a>, as well\u00a0as after\u00a0building any other chart<\/a> using our\u00a0JS charting library, you can add an annotation to it\u00a0with the help of the\u00a0dedicated module<\/a>.<\/p>\n

In Detail<\/h3>\n

First,\u00a0access\u00a0the\u00a0annotations()<\/code> object:<\/p>\n

var controller = chart.annotations();<\/code><\/pre>\n
Second, create\u00a0a desired annotation\u00a0using an appropriate method depending on\u00a0the type of annotation<\/a> you\u00a0want to display: ellipse()<\/code>, rectangle()<\/code>, triangle()<\/code>, etc. For instance:<\/p>\n
var triangle = controller.triangle();<\/code><\/pre>\n
Third, configure the annotation by using\u00a0the\u00a0xAnchor()<\/code>,\u00a0valueAnchor()<\/code>,\u00a0secondXAnchor()<\/code>,\u00a0and secondValueAnchor()<\/code> methods inside the employed annotation type method to set\u00a0two\u00a0anchor points\u00a0determining the\u00a0position and size of the annotation. You can also customize the appearance as per your needs and preferences:<\/p>\n
var triangle = controller.triangle({\r\n  xAnchor: \"1.5\",\r\n  valueAnchor: 45,\r\n  secondXAnchor: \"2.6\",\r\n  secondValueAnchor: 62,\r\n  fill: {opacity: 0},\r\n  stroke: \"2 red\"\r\n});<\/code><\/pre>\n
Here’s what the entire code for such an annotation can look like when all the previous snippets are combined:<\/p>\n
\/\/ access the annotations() object\r\nvar controller = chart.annotations();\r\n\r\n\/\/ create and configure an annotation\r\nvar triangle = controller.triangle({\r\n  xAnchor: \"1.9\",\r\n  valueAnchor: 17,\r\n  secondXAnchor: \"2.1\",\r\n  secondValueAnchor: 19,\r\n  fill: \"#4CAF50 0.5\",\r\n  stroke: \"3 #FF9800\"\r\n});<\/code><\/pre>\n
Alternatively, you can\u00a0work with the annotations()<\/code> object using\u00a0the literal syntax notation\u00a0instead of function constructors. Here’s how it can look:<\/p>\n
chart.annotations([\r\n  {\r\n    type: \"triangle\",\r\n    xAnchor: 1.9,\r\n    valueAnchor: 17,\r\n    secondXAnchor: 2.1,\r\n    secondValueAnchor: 19,\r\n    fill: \"#4CAF50 0.5\",\r\n    stroke: \"3 #FF9800\"\r\n  }\r\n]);<\/code><\/pre>\n
Example<\/h3>\n
Check out an example of a JS line chart with two annotations, a triangle and an ellipse, and feel free to experiment further with its code and visualization:<\/p>\n
    \n
  • Cartesian Line Chart with Annotations | AnyChart Playground<\/a><\/li>\n<\/ul>\n
    \"An<\/a><\/p>\n
    Further Learning<\/h2>\n
    Learn more about adding\u00a0and customizing annotations\u00a0in our JavaScript charting docs, with links to the articles explaining how to configure each type of annotation, illustrated with relevant chart examples:<\/p>\n
      \n
    • Drawing Tools and Annotations | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
      Wrapping Up<\/h2>\n
      For any queries or further assistance, please feel free to comment\u00a0or contact our Support Team<\/a>.<\/p>\n
      Continue following\u00a0our JavaScript Chart Tips<\/a> series for more insights and techniques\u00a0inspired by real customer cases.<\/p>\n
      Happy coding and charting with JavaScript!<\/strong><\/p>\n