Is there any directive for highcharts where you don't need the full jQuery? This ones seem's the most popular at the moment but I can't get it work without jQuery: https://github.com/pablojim/highcharts-ng
Is it possible to write a highcharts directive and only using the light version of jQuery that is included with angular?
If I do have to include the full jQuery, will it affect the loading time/performance of my app signifigantly?
Highcharts requires that jquery is available on the window global scope (old web page global style) which makes it hard to use with a bundler like webpack.
To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.
Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on.
It's not hard to build a directive that wraps the existing javascript library.
This is code for a highchart directive. It's very simple.
app.directive("highcharts", function() {
return {
link: function(scope, el, attrs) {
var options = scope.$eval(attrs.highcharts);
options.chart.renderTo = el[0];
new Highcharts.Chart(options);
}
};
})
Full demo is here. http://plnkr.co/edit/iN8TAMKyHIyN4F44iJ0U?p=preview
My answer to you is, if you like https://github.com/pablojim/highcharts-ng
just add standalone-framework instead of full jQuery.
if not, like me :), build your own like the demo provided. it's not that hard.
BTW, This is the page Highcharts introduces their standalone framework.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With