Create charts dynamically with Angular 2 and Highcharts
A recurrent question is “How to create charts dynamically?”. So here’s an article to treat this subject without any external package. As previous Angular 2 articles, I’m using TypeScript and ES5. Yes, I know Angular (4.x) is released but both versions slightly works the same. The below code could be optimized but I want to show you all the steps to reach our target! Of course, if you have any questions, feel free to ask me in comments!
At first we need to define exactly what we need and how we are going to code it. The goal is to define what we really need to dev this functionality without useless stuff. So let’s form the basis of our app.
Here’s the main tree of the app (obviously it’s a Plunker app so the tree may differ yours):
As you can see above there are essential things like all the
app.*
files, vital for the Angular application. The most important is the_services
folder that contains anindex.ts
file (to facilitate all import statements) andhighcharts.service.ts
, the file that will do the work!
Let’s code! Here’s our highcharts.service.ts
:
The above code is the basis of our service: it will allow us to create, store, retrieve and remove Highcharts instances.
We import Highcharts
in order to create some cool charts. The charts = [];
variable will contain all the chart instances. defaultOptions = {};
is a default option object in case of no custom configuration is given at the Highcharts creation time.
Let’s talk about the rest of the code into this service:
Wow, things happened at the top! Let’s check it out:
the createChart(container, options?: Object)
method creates Highcharts instances and automatically push them to the DOM (and our array previously defined). It takes a container
parameter that is a Node element, in order to give Highcharts a place to append its chart.
It also takes a second optional parameter options?
(please note the ?
after the parameter declaration to make it optional) which will eventually takes an Object. Refer to the Highcharts’s official documentation to make your own chart options.
Inside our createChart(...)
function, we declare two variables: opts
that will contain the given chart options passed to the function (if no options are given, it takes a default configuration Object this.defaultOptions
).
The e
variable (“e” for “element”) is quite simple to understand: it contains a new DOM element to tell our new Highcharts instance a place to append all the chart code (to sum up, a big SVG element). If you want to learn how to manipulate Nodes, then check this doc out!
The if() { ... } else { ... }
statement that follows is designed to set the renderTo
property of the opts
Object. If the passed options
object doesn’t contain the chart
property (which includes the renderTo
prop.) then we create it and assign it to our freshly created Node: e
.
Finally we only need to push into the charts
array a new instance of an awesome Highcharts chart!
That’s all for this step!
Don’t forget to declare the
HighchartsService
into theapp.module.ts
providers!
From now, the hardest is done! Let’s take a look at the app.component.ts
.
Firstly we need to import our awesome service:
So we can use it in the component’s constructor:
Then we declare two different functions to create some cool charts using the HighchartsService
To manipulate our charts easily from the view, we also declare two functions to remove the first or the last charts (you can obviously customize them to fit your needs)
Now let’s use these functions into our view
Notice the
#charts
variable! We’re going to use it in our component to give Highcharts’s charts a Node parent to append its code (as said above, a big SVG element).
And finally, don’t forget to put this at the top of the component’s Class:
Here is the final result! Don’t hesitate to play with it.
Feel free to ask any questions you may have!