{"id":18284,"date":"2024-11-21T12:37:50","date_gmt":"2024-11-21T12:37:50","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=18284"},"modified":"2024-11-30T14:53:03","modified_gmt":"2024-11-30T14:53:03","slug":"gantt-chart-legend","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/11\/21\/gantt-chart-legend\/","title":{"rendered":"Gantt Chart Legend \u2014 JS Chart Tips"},"content":{"rendered":"

\"A<\/a>Legend<\/a> is a vital element in many charts, helping viewers quickly understand what each visual component represents. However, it is not always a must-have for every chart type<\/a>. For instance, Gantt charts<\/a> often work perfectly fine without a legend, so it is not enabled in our JavaScript Gantt Chart<\/a> by default. That said, creating one\u00a0is straightforward. Right now, we will show you how to add a legend to a Gantt chart<\/strong> \u2014 join us as we continue our JS Chart Tips<\/a> series, sharing quick solutions inspired by real customer queries!<\/p>\n

<\/p>\n

Question: How to Add Legend to Gantt Chart?<\/h2>\n

Our\u00a0Support Team<\/a>\u00a0recently assisted a customer who wanted to\u00a0make a\u00a0legend for a Gantt chart. While no specific details or images were provided, our engineers assumed the request involved illustrating diverse milestone markers. They prepared a relevant example with explanations, which turned out to fully meet the customer\u2019s needs. Let us now walk you through the steps to create a similar Gantt chart legend yourself.<\/p>\n

\"A<\/p>\n

Solution: Creating Legend for Gantt Chart<\/h2>\n

Overview<\/h3>\n

To add a legend to your Gantt chart, use the legend()<\/code>\u00a0method. You can then configure it with methods from the anychart.core.ui.Legend<\/a> class, as the legend element in our\u00a0JavaScript charting library<\/a>\u00a0is defined as its instance.<\/p>\n

In Detail<\/h3>\n

Assuming you have already created a Gantt chart<\/a>, here is how you can add a legend.<\/p>\n

First<\/strong>,\u00a0enable\u00a0the legend’s display:<\/p>\n

chart.legend().enabled(true);<\/code><\/pre>\n
Second<\/strong>,\u00a0set the legend items using the items()<\/code> method with an array of items as a parameter. Each item should\u00a0specify:<\/p>\n
    \n
  • The shape of the icon with iconType<\/code><\/li>\n
  • The icon’s fill color with\u00a0iconFill<\/code><\/li>\n
  • The label text with text<\/code><\/li>\n<\/ul>\n
    chart.legend().items([\r\n  {\r\n    text: 'Meetings',\r\n    iconFill: '#64b5f6',\r\n    iconType: 'pentagon'\r\n  },\r\n  ...\r\n]);<\/code><\/pre>\n
    That’s pretty much it! Here\u2019s the complete code\u00a0for creating such a legend using method chaining:<\/p>\n
    \/\/ Add a legend:\r\nchart.legend()\r\n  .enabled(true)\r\n  \/\/ set the legend's items\r\n  .items([\r\n    {text: 'Meetings', iconFill: '#64b5f6', iconType: 'pentagon'},\r\n    {text: 'Reviews', iconFill: '#ffd54f', iconType: 'diamond'},\r\n    {text: 'Publishing', iconFill: '#00bfa5', iconType: 'star5'},\r\n    {text: 'Other', iconFill: '#96a6a6', iconType: 'square'}\r\n  ]);<\/code><\/pre>\n
    Examples<\/h3>\n
    Check out an example of a Gantt chart with a legend created following exactly the steps described above:<\/p>\n
      \n
    • Gantt Chart with Legend | AnyChart Playground<\/a><\/li>\n<\/ul>\n
      \"Gantt<\/a>
      \nFor situations where the legend is required inside the Gantt chart\u2019s stage, explore this example using the       standalone legend<\/a>\u00a0mechanism:<\/p>\n
        \n
      • Gantt Chart with Standalone Legend Within | AnyChart Playground<\/a><\/li>\n<\/ul>\n
        \"Gantt<\/a><\/p>\n
        Further Learning<\/h2>\n
        Learn more about adding chart legends in our JavaScript charting docs, illustrated with relevant examples:<\/p>\n
          \n
        • Legend | AnyChart JS Documentation<\/a><\/li>\n
        • Standalone Legend | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
          Wrapping Up<\/h2>\n
          We hope this guide helps you effectively add a legend<\/a> to your Gantt chart. For advanced visualizations,\u00a0consider using the\u00a0standalone legend<\/a>\u00a0feature, including scenarios with multiple legends in a single chart<\/a>\u00a0or shared legends across multiple charts<\/a>.<\/p>\n
          Should you have any questions or need further assistance, feel free to\u00a0contact our\u00a0Support Team<\/a> via email or live chat (available throughout our website in the bottom right corner).<\/p>\n
          Stay tuned for more insights and techniques inspired by real customer cases in our\u00a0JS Chart Tips<\/a> series, and enjoy creating interactive data visualizations with JavaScript!<\/strong><\/p>\n