Search Posts

Category: highcharts

‘Highmaps/Highcharts’ change width, height and positioning on page refresh

I am using ‘highmaps’ in my project on angularjs. The map plots just fine the first time page is rendered (as per the width, height and positioning on the page as I want). But when I route to another page and then back again from the links on the sidebar, the size and positioning are completely different and the alighnment is all messed up. The wanted alignment is The unwanted alignment is Following is my […]

How to change marker symbol based on value in angularjs

I’m using angularjs for drawing highchart data. I want to customize marker symbol based on specific value. here is code / Directive Highchart App.directive(‘hcChart’, function ($parse) { ‘use strict’; return { restrict: ‘E’, replace: true, template: ‘<div><div class=”chart”></div></div></div>’, link: function (scope, element, attrs) { attrs.chart = new Highcharts.chart(element[0], { xAxis: { title: { text: “Date” } }, yAxis: { title: { text: “Value” } }, dataLabels: { enabled: true } , title: { text: “” […]

Angular4 with highcharts can’t use world.js

I need help with getting my highmap in angular4 app. I installed highcharts using npm. I included highcharts in my app.component.ts like this because I had some errors that this way solves (maybe it is the wrong way) : const Highcharts = require(‘highcharts’); require(‘highcharts/highcharts-more’)(Highcharts); require(‘highcharts/modules/solid-gauge’)(Highcharts); require(‘highcharts/modules/map’)(Highcharts); require(‘highcharts/modules/data’)(Highcharts); require(‘highcharts/js/modules/world’)(Highcharts); After that I can use Highcharts for creating the charts without any problems but the problem is that when I want to create a map using Highcharts.js […]

Need help to generate multiple high charts in ng-repeat

I am able to generate one chart. But here there one situation where I need to generate multiple(one or more) charts. Please help me to it with ng-repeat. JSON data for multiple charts [ { “id”: 123, “seriesData”: [ { “name”: “Times”, “data”: [ [ 1505347200000, 20 ] ] }, { “name”: “Prices”, “data”: [ [ 1505347200000, 80 ] ] }, { “name”: “Cleaner”, “data”: [ [ 1505347200000, 40 ] ] }, { “name”: “Other”, […]

Highcharts-ng stock chart gives "TypeError: Cannot read property ‘hoverSeries’ of undefined" when loading data asynchronously

In my AngularJS app I’m using the custom directive ‘highcharts-ng’ to generate charts. I have a JSFiddle that creates a stock chart and works properly with scope-defined data, but throws an error when data are being fetched with $resource calls to a REST API (through a Factory): JSFiddle that works with scope-defined data For the REST-driven version, I have the following function for querying data: function getData(start, end) { return measurementsFactory .getMeasurements(start, end) .then(function(response) { […]