Search Posts

Category: highcharts

Highcharts – how to color spider chart areas by group value

I’m using Highcharts with spider chart option and I’m interested in filling chart areas with a certain color, based on a common value of the items that are included in the graphic. The chart shows item values, but the items should be grouped by colors (c1, c2) based on the group value which can be found within the object that I’m using. Each item has a group. Thanks Source: AngularJS

Ionic3 Highcharts-More import Error –JsAllow Not Set

I try to import Highcharts-more like this: import Highmore from ‘../../node_modules/highcharts/highcharts-more’; then im getting the following Error: Module ‘../../node_modules/highcharts/highcharts-more’ was resolved to ‘C:/Users/…/node_modules/highcharts/highcharts-more.js’, but ‘–allowJs’ is not set. So I go into my tsconfig.json and add allowJs to my settings: { “compilerOptions”: { “allowJs”: true, “allowSyntheticDefaultImports”: true, “declaration”: false, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “lib”: [ “dom”, “es2015” ], “module”: “es2015”, “moduleResolution”: “node”, “sourceMap”: true, “target”: “es5” }, “include”: [ “src/**/*.ts” ], “exclude”: [ “node_modules” ], […]

Dynamic add charts based on a factory pattern

I want to add dynamically charts to a widget from a combobox. I have used the factory pattern to achieve this. This is the code for the backend: public interface ICharts { string chartType (); } public class ChartsFactory { public ICharts GraphType(ChartsType chartype) { switch (chartype) { case ChartsType.AREA: return new Area(); case ChartsType.BAR: return new Bar(); case ChartsType.HORIZONBAR: return new HorizonBar(); case ChartsType.HEATMAP: return new Heatmap(); case ChartsType.PIE: return new Pie(); default: throw […]

Highcharts components unresponsive with angular gridstack

I am using highcharts in combination with angular gridstack for making widgets and graphs. This is the situation now As you can see I am using a stacked bar component and area component both copied from the highcharts documentation. The problem is it is not responsive. This is my code of index.html <div class=”row”> <div class=”col-md-12″> <div gridstack class=”grid-stack grid1″ options=”options” > <div gridstack-item ng-repeat=”w in dashboard.Widgets track by $index” class=”grid-stack-item” gs-item-x=”w.x” gs-item-y=”w.y” gs-item-width=”w.width” gs-item-height=”w.height” […]

Multiselect columns in Highcharts

I am struggling with creating a multi-select column chart in highcharts. My goal is to let the user be able to select / deselect any pair of columns from the chart. Expect Behavior: On category click (i.e – the user clicks on one of “0 – 1M” bars), both bars should change color. Another click will revert the color. How to notify the external app (AngularJS) of the selected columns? I am using the events […]

Automatically redraw a highStock chart under Angularjs

I want to make a highStock chart under AngularJS, and I want to change some chart option by some buttons. However, it seems that changing the option does not redraw the chart automatically. I tried to follow a thread which works with highChart, but I cannot make the directive work with highStock. Here is a plunker, the watch is well triggered, whereas I don’t know how redraw the chart well. .directive(‘highchart’, function($parse, $timeout) { return […]

how to add dynamic y axis in highchart from specific point of x-axis

how to add dynamic y axis from specific point of x-axis. suppose my x-axis values are (jan,feb,march….dec) i want to generate y axis from Jun-dec (x-axis). when ever i click the button but its generate a yaxis and start from jan- july in x-axis instead of jun-dec please see the jsfiddle you can understand my problem clearly. var chart = Highcharts.chart(‘container’, { xAxis: { categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, […]

‘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 […]

Next Page »