gain entry to the chart object within highcharts

Question

gain entry to the chart object within highcharts

Having trouble accessing the chart object in Highcharts using the AngularJS directive HIGHCHARTS-NG.

var chart = $scope.chartConfig.getHighcharts();

console.log("chart", chart);

Encountering an error: $scope.chartConfig.getHighcharts is not a function.

When I

console.log("chart", chartConfig);

The object now includes the getHighcharts() function.

However, when I do

var chart = $scope.chartConfig
console.log("chart", chart);

The getHighCharts function is no longer available!

I really need to access that chart object urgently.

Thanks

javascript angularjs highcharts

Answer 1

Answer №1

My recommendation is to utilize the highcharts libraries as they are without relying on unofficial plugins. The issue with unofficial plugins is that they may become incompatible in the future.

If you need to access the chart object, you can try the following methods:

Use the plugin method .getHighChart. If you have the following code:

<highchart id="chart1" config="chartConfig"></highchart>

You can use the func option like this:

$scope.chartConfig = {
...,
  func: function(chart){
     // manipulate the chart here
  }
}

This func option is a reference to the callback function that is called when the highchart object is created:

var x = new Highcharts(options, func);

Alternatively, you can use jQuery:

var chart = $("#chart1").highcharts();

I hope this information proves useful.

Best regards, Luis

Answer 2

My recommendation is to utilize the highcharts libraries as they are without relying on unofficial plugins. The issue with unofficial plugins is that they may become incompatible in the future.

If you need to access the chart object, you can try the following methods:

Use the plugin method .getHighChart. If you have the following code:

<highchart id="chart1" config="chartConfig"></highchart>

You can use the func option like this:

$scope.chartConfig = {
...,
  func: function(chart){
     // manipulate the chart here
  }
}

This func option is a reference to the callback function that is called when the highchart object is created:

var x = new Highcharts(options, func);

Alternatively, you can use jQuery:

var chart = $("#chart1").highcharts();

I hope this information proves useful.

Best regards, Luis

gain entry to the chart object within highcharts

Answer №1

Similar questions

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

Issue with memory leak in Three.js r89 when using STL models

Where is the best place to implement HTML form validation: on the frontend or backend?

Tips for utilizing a form from one component within a different component

Tips on harnessing the power of AngularJS $scope

Error encountered during predeploy parsing in Firebase Functions when running lint operation

Unable to create <td> structure using nested ng-repeat loops

Troubles arising when trying to import a CSS file into a React Component without resorting to

Tips on implementing jQuery in a JavaScript file referenced in angular.json

Is there a way to verify an email address and transfer form data to a different HTML page for printing?

Exploring the functionality of Angular directives for bidirectional data binding with object references

What is the best way to construct a GET request with a URL that includes parameters?

During the initial render in next-auth, the useSuspenseQuery function is triggered to fetch data without a defined token, resulting in an

Chat Bot - EmbedMessage

Importing a class from a JavaScript file in Typescript: a step-by-step guide

The JSON data in ajax is not formatted correctly

The AJAX response is not functioning as expected

Display logo when website has been scrolled

Comparing Two Items between Two Arrays

Facing an issue in React-Native where unable to navigate to the second screen