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.
Let’s dive in and learn from Highsoft founder Torstein Hønsi as he shows Highsoft’s CEO Atle Sivertsen how to get Copilot up and running in Visual Studio Code and create Highcharts configurations in seconds.
What is Copilot and how does it know about Highcharts?
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.
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 “shadow code” (“shadow” because of its light-gray, non-permanent appearance.)
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.
Let’s see how Copilot + Highcharts works by configuring a typical Highcharts setup.
How to use Copilot with Highcharts
To use Copilot with Highcharts, make sure you have VS Code installed, then go to Settings > Extensions and search for the GitHub Copilot plugin and click install. You will need a Github Copilot subscription in order to use the plugin.
Getting Started
In VS Code, create a new HTML file. Inside the <head> of the document, type the comment
<!— Load Highcharts —>
and hit enter.
You’ll 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.
Move your cursor below the closing </head> tag, and Copilot will not only suggest the <body> tag, but since you’ve already asked it to load Highcharts, Copilot provides the HTML and JavaScript configuration used in a typical Highcharts setup.
Hit tab to accept the code (and tab again to accept the closing </body> tag), and that’s it. With a few clicks and taps, you have a basic, working chart configuration that you can edit and add to.
Beyond the Basics
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?
In your HTML file, delete JavaScript that’s between the inline <script> tags in the body. In its place, type the comments:
// create a column chart with three series // the chart should be about sports results
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.
Tweak with Comments
In addition to using comments to generate complete Highcharts configurations, you can also use them inside your configurations to tweak or add chart elements.
For example, to align the legend of our sports chart to the right, move to a blank line inside your configuration code and type:
// The legend should be aligned to the right.
Based on this comment, Copilot adds a legend object to your configuration with all the appropriate settings filled in.
Prompts work too
There are other ways to use Copilot to generate code besides inline comments and auto-generated shadow code.
In your HTML file, delete the inline configuration for our sports chart, and in its place type Highcharts.stockChart. Notice something as you type? There’s no shadow code suggestions.
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 Highcharts.stockChart.
Instead of displaying shadow code, Copilot presents a group of gold stars to the left of the code we just added. When you click on them, a box appears where you can prompt Copilot for exactly what you need.
This feature comes in handy when you’re kind of fuzzy on syntax, don’t know where to begin or even how to code. Just explain what you want in plain language, and Copilot will deliver.
Chat with our API
If you’re absolutely, totally lost, a great way to get help from Copilot is to chat with it. Simply click on the “Chat” icon in your VS Code sidebar to launch the feature and ask your question.
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’s a great time-saving alternative to moving back and forth between your code environment and external Highcharts documentation.
Note: access to the Highcharts API through Copilot isn’t quality assured, and Copilot’s knowledge of new Highcharts features may not be up to date, so utilize Copilot’s responses with caution.
It’s an Assistant. Not a replacement.
Despite Copilot’s wizardry, developers will be needed more than ever to assure Copilot’s code quality. That’s why it’s called Copilot and not “Pilot.”
Think of it this way. If you’re 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.
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.
Conclusion
GitHub Copilot is far more sophisticated than what we’ve shown and capable of much more than inserting basic Highcharts configurations into HTML files. Check out GitHub Copilot’s official page to learn more about Copilot’s powerful features and how they can help you and your team supercharge your Highcharts development projects.
Leave a Reply