{"id":24866,"date":"2024-04-15T22:07:58","date_gmt":"2024-04-15T22:07:58","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=24866"},"modified":"2026-01-13T11:46:23","modified_gmt":"2026-01-13T11:46:23","slug":"highcharts-github-copilot","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/news\/highcharts-github-copilot\/","title":{"rendered":"Highcharts + Github Copilot"},"content":{"rendered":"<p>Developing Highcharts data visualizations just got a lot faster thanks to GitHub Copilot, an AI-powered code-completion tool that puts the knowledge of the Highcharts API at your fingertips.<\/p>\n<p>Let\u2019s dive in and learn from Highsoft founder Torstein H\u00f8nsi as he shows Highsoft&#8217;s CEO Atle Sivertsen how to get Copilot up and running in Visual Studio Code and create Highcharts configurations in seconds.<\/p>\n<h2><b>What is Copilot and how does it know about Highcharts?<\/b><\/h2>\n<p>GitHub Copilot is a code-completion tool powered by an AI that has been trained on an extensive body of public source code, including the Highcharts API.<\/p>\n<p>You can prompt Copilot via in-line comments or simply by typing. For example, type out the opening characters of a typical Highcharts configuration, and Copilot will suggest surprisingly complete Highcharts \u201cshadow code\u201d (\u201cshadow\u201d because of its light-gray, non-permanent appearance.)<\/p>\n<p>To accept the suggestions, hit the tab key and voila! The fully-formatted HIghcharts code is added to your file, saving you from a lot of tedious, repetitive typing.<\/p>\n<p>Let\u2019s see how Copilot + Highcharts works by configuring a typical Highcharts setup.<\/p>\n<h2><b>How to use Copilot with Highcharts<\/b><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: How to Install\" src=\"https:\/\/www.youtube.com\/embed\/1N0TjUfJMbs?si=rATi1oOO0I4BkFqQ\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>To use Copilot with Highcharts, make sure you have VS Code installed, then go to Settings &gt; Extensions and search for the GitHub Copilot plugin and click install. You will need a <a href=\"https:\/\/docs.github.com\/en\/billing\/managing-billing-for-github-copilot\/about-billing-for-github-copilot\">Github Copilot subscription<\/a> in order to use the plugin.<\/p>\n<h2><strong>Getting Started<\/strong><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: Getting Started\" src=\"https:\/\/www.youtube.com\/embed\/pGhSd-MJ3A4?si=T01qfdNtkf3vowFT\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>In VS Code, create a new HTML file. Inside the &lt;head&gt; of the document, type the comment<\/p>\n<pre>&lt;!\u2014 Load Highcharts \u2014&gt;<\/pre>\n<p>and hit enter.<\/p>\n<p>You\u2019ll see that Copilot suggests the script tags required for a basic Highcharts configuration. Hit tab after each script tag suggestion to add them to your file.<\/p>\n<p>Move your cursor below the closing <code>&lt;\/head&gt;<\/code> tag, and Copilot will not only suggest the <code>&lt;body&gt;<\/code> tag, but since you\u2019ve already asked it to load Highcharts, Copilot provides the HTML and JavaScript configuration used in a typical Highcharts setup.<\/p>\n<p>Hit tab to accept the code (and tab again to accept the closing <code>&lt;\/body&gt;<\/code> tag), and that\u2019s it. With a few clicks and taps, you have a basic, working chart configuration that you can edit and add to.<\/p>\n<h2><b>Beyond the Basics<\/b><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: Beyond the Basics\" src=\"https:\/\/www.youtube.com\/embed\/X9W0kiIpvMg?si=wpgUzVvRAHZw5mvE\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>The Highcharts configuration we just generated resulted in a super basic line chart with generic dummy data. But what if you want to change the series type to something more interesting or make the sample data more reflective of the ultimate purpose of your data visualization?<\/p>\n<p>In your HTML file, delete JavaScript that\u2019s between the inline <code>&lt;script&gt;<\/code> tags in the body. In its place, type the comments:<\/p>\n<pre>\/\/ create a column chart with three series\r\n\/\/ the chart should be about sports results\r\n<\/pre>\n<p>From these simple comments, Copilot generates a complete Highcharts configuration that visualizes how three teams (the columns) scored across three different sports. Exactly what we asked for.<\/p>\n<h2><b>Tweak with Comments<\/b><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: Tweak with Comments\" src=\"https:\/\/www.youtube.com\/embed\/im9mDN6rDlg?si=i_kl33AADtSRiay5\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>In addition to using comments to generate complete Highcharts configurations, you can also use them inside your configurations to tweak or add chart elements.<\/p>\n<p>For example, to align the legend of our sports chart to the right, move to a blank line inside your configuration code and type:<\/p>\n<pre>\/\/ The legend should be aligned to the right.<\/pre>\n<p>Based on this comment, Copilot adds a legend object to your configuration with all the appropriate settings filled in.<\/p>\n<h2><b>Prompts work too<\/b><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: Working with Prompts\" src=\"https:\/\/www.youtube.com\/embed\/Psic4N-2jMY?si=IDZvdMY9e-ZPwfh8\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>There are other ways to use Copilot to generate code besides inline comments and auto-generated shadow code.<\/p>\n<p>In your HTML file, delete the inline configuration for our sports chart, and in its place type <code>Highcharts.stockChart<\/code>. Notice something as you type? There\u2019s no shadow code suggestions.<\/p>\n<p>The lack of shadow code is due to the fact that we have not included the Highcharts Stock module in our HTML document, so Copilot has no immediate understanding of <code>Highcharts.stockChart<\/code>.<\/p>\n<p>Instead of displaying shadow code, Copilot presents a group of gold stars to the left of the code we just added.\u00a0 When you click on them, a box appears where you can prompt Copilot for exactly what you need.<\/p>\n<p>This feature comes in handy when you\u2019re kind of fuzzy on syntax, don\u2019t know where to begin or even how to code. Just explain what you want in plain language, and Copilot will deliver.<\/p>\n<h2><b>Chat with our API<\/b><\/h2>\n<div style=\"position: relative; margin: 10px 0px;\"><iframe style=\"width: 100%; height: 100%; min-height: 500px;\" title=\"Highcharts and GitHub Copilot: Chat with our API\" src=\"https:\/\/www.youtube.com\/embed\/A-Td8RvENAQ?si=YLz3AswFwugPj0eV\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>If you\u2019re absolutely, totally lost, a great way to get help from Copilot is to chat with it. Simply click on the \u201cChat\u201d icon in your VS Code sidebar to launch the feature and ask your question.<\/p>\n<p>As Copilot is aware of the Highcharts API, it will not only answer your Highcharts questions in detail but also provide sample code that you can cut and paste into your editor. It\u2019s a great time-saving alternative to moving back and forth between your code environment and external Highcharts documentation.<\/p>\n<p><i>Note: access to the Highcharts API through Copilot isn\u2019t quality assured, and Copilot\u2019s knowledge of new Highcharts features may not be up to date, so utilize Copilot\u2019s responses with caution.<\/i><\/p>\n<h2><b>It\u2019s an Assistant. Not a replacement.<\/b><\/h2>\n<p>Despite Copilot\u2019s wizardry, developers will be needed more than ever to assure Copilot\u2019s code quality. That\u2019s why it\u2019s called Copilot\u00a0 and not \u201cPilot.\u201d<\/p>\n<p>Think of it this way. If you\u2019re a good taxi driver with good driving habits and opt to use GPS, you will become a great taxi driver. But if you drive poorly, GPS will not make you a better driver.<\/p>\n<p>The same applies to developers using Copilot. The more you use it, the more it will pick up on your coding habits, good or bad. So use Copilot wisely. In addition to a clever sidekick, it can also be a great teacher.<\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>GitHub Copilot is far more sophisticated than what we\u2019ve shown and capable of much more than inserting basic Highcharts configurations into HTML files. Check out<a href=\"https:\/\/github.com\/features\/copilot\"> GitHub Copilot&#8217;s official page<\/a> to learn more about Copilot\u2019s powerful features and how they can help you and your team supercharge your Highcharts development projects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to get Copilot up and running in Visual Studio Code to create Highcharts configurations in seconds.<\/p>\n","protected":false},"author":250,"featured_media":24872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[211],"tags":[1094],"coauthors":[786],"class_list":["post-24866","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24866","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\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=24866"}],"version-history":[{"count":3,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24866\/revisions"}],"predecessor-version":[{"id":24874,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/24866\/revisions\/24874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/24872"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=24866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=24866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=24866"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=24866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}