How to Programming with Highcharts

javascript,html,charts,highcharts

Not a perfect solution, but should be good starting point: (function(H) { H.wrap(H.seriesTypes.columnrange.prototype, 'drawPoints', function(p) { var s = this, chart = s.chart, xAxis = s.xAxis, yAxis = s.yAxis, path, x, y, r = chart.renderer, radius = s.barW / 2; p.call(this); H.each(this.points, function(p) { if(p.options.avg) { y = yAxis.toPixels(p.options.avg *...

Angular Highcharts 10 $digest() iterations reached when object is replaced

angularjs,highcharts

It's the filter in the markup that is causing your $digest() errors.You can work around it by e.g. filtering the data in your controller. So you could have the following template. <select data-ng-model="gender" ng-change="genderChanged()" class="form-control"> <option value=""> - Select all -</option> <option value="m">Male</option> <option value="f">Female</option> </select> <salary-chart data="filtered"></salary-chart> And in...

PHP + mysql + highcharts

php,mysql,highcharts

Look to documentation of jQuery.get() : https://api.jquery.com/jquery.get/ First parameter of this function is URL for GET request. In Your code is data from method: MysqlDatabase->find_all_for_charts() In HighCharts package, You can find examples how to use it. Just download it from http://www.highcharts.com/download, and look for: "Ajax loaded data, clickable points" demo....

Spline chart drawn on the xaxis in case of single value or constant values - highchart

I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.

Get all points in Highcharts scatter plot?

javascript,highcharts,heatmap

in the chart object which you got i.e var chart = new Highcharts.Chart(options); you have every aspect about the chart in it Here is the part where you can find the plotted data chart.series[0].data ...

limit Highcharts x-Axis grouped categories and labels style

css,highcharts

Are m and l params constant? Or can you change them? If yes, then see: http://jsfiddle.net/TFhd7/373/ In short: Categories reserves a place from -0.5 to 0.5 with category index. For example Year7 -> 4 means x-values from 3.5 to 4.5. So according to this information let's change that values: var...

How to Hide rest of the region when user clicks pie chart?

javascript,jquery,html,css,highcharts

You can use plotOptions.series.point.events.click function to tell the chart exactly what to do after the click of a slice: series: { point: { events: { click: function () { var index = this.x; $('.highcharts-series-group g path').toggle(); $('.highcharts-series-group g path:nth-child(' + (index+1) + ')').toggle(); $('.highcharts-data-labels path').toggle(); $('.highcharts-data-labels path:nth-child(' + (index+1) +...

Highcharts Heatmap Legend Max

It's another option to colorAxis. Documentation Make your colorAxis object in options like this: colorAxis: { min: 0, max: 100, minColor: '#FFFFFF', maxColor: Highcharts.getOptions().colors[0] }, Full fiddle...

Highcharts GANTT chart - need to allow category with no data

javascript,charts,highcharts,overlap

Highcharts default behavior will show the category even if there is no data, unless it is the first or last category. You can just change your input array to have an empty intervals array in your case: http://jsfiddle.net/jlbriggs/2xkfm87e/1/ If you need the first or last category to be empty, you'll...

Highcharts failing to display data

php,html,ajax,json,highcharts

To answer my own question, I found that I needed the code: header("Content-type: text/json"); At the top of my .php file....

How to instruct highcharts scatter chart to print all dataLabels

You can set allowOverlap: true, like this: plotOptions: { series: { dataLabels: { allowOverlap: true } } } See this updated JSFiddle demonstration....

Format categories (x-axis) for highcharts

javascript,jquery,angularjs,highcharts

To do this on your xAxis use the labels.formatter function: labels: { formatter: function() { return Highcharts.dateFormat('%H:%M:%S', parseInt(this.value, 10)); } } You can use this same formatting in your tooltip as well using tooltip.formatter....

Is there a way to disable a legend item by default?

Yes, you can do this. In the series options for the data element you do not want to show set the visible property to false. series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], visible: false }, { data: [144.0, 176.0, 135.6, 148.5, 216.4,...

Highcharts Density Dot Map Support?

javascript,highcharts,requirejs

mappoint series doesn't work with colorAxis, but well, it's Highcharts so it's possible to extend default functionalities: (function (H) { // add colorAxis H.seriesTypes.mappoint.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; // draw points and add setting colors H.wrap(H.seriesTypes.mappoint.prototype, "translate", function (p) { p.call(this); H.seriesTypes.mappoint.prototype.translateColors.call(this); }); // copy method from heatmap for color...

Library duplication issue using Highcharts in Jaspersoft Studio

Finally, I have solved the problem by merging all Highcharts files I needed to draw my Bubble map chart, as suggested by @PawełFus, and enclosed the code with a condition on Highcharts variable : if (typeof Highcharts == 'undefined') { /* Optimized merge files containing both highstock.js, highcharts-more.js and map.js...

Highcharts solid gauge with multiple series

javascript,jquery,angularjs,charts,highcharts

Now simply add radius option: http://jsfiddle.net/gc323yu6/2/ series: [{ data: [83], innerRadius:'120%', radius: '110%' }, { data: [50], innerRadius:'110%', radius: '100%' }, { data: [19 ], innerRadius:'90%', radius: '80%' }] ...

Highcharts inverted line where dates go upwards, not downwards (reversed series)?

highcharts,highstock

Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used: http://jsfiddle.net/ryfssm1u/ $('#container').highcharts({ chart: { type: 'spline', inverted: true }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -150, y: 100, floating: true, borderWidth: 1 },...

Change color of different points in same series Highcharts

All you need to do is to replace array form of your data to object. This case you can set your color explicitly for (x = 0; x < 5; x++) { var item = $scope.jsondata[x]; newdata.push({name:setName(item.name), y:item.data, color: getColor(item.data)}); } Here's my update to your plunker http://plnkr.co/edit/UaW6RqM4PsGoy5IdpXDR...

Highcharts scatter set markers

They may be selected randomly by default, but to set them explicitly, try something like this: series: [{ name: 'Predefined symbol', data: [316.4, 294.1, 195.6, 154.4], marker: { symbol: 'triangle' } }], Where the symbol attribute can specify a shape or link to an icon. There are some pretty cool...

Adding call outs to a Highcharts - Stacked Bar

css,highcharts

Live demo: http://jsfiddle.net/5joufkwa/9/ Solution is to use series.dataLabels and generate there callouts: plotOptions: { series: { stacking: 'normal', dataLabels: { align: "right", // right align for label enabled: true, useHTML: true, allowOverlap: true, overflow: "none", crop: false, y: -50, x: 145, formatter: function () { return '<div class="callout top" data-name="Jane">I...

Highcharts custom export hidding on Reset

javascript,highcharts,ordinal

That line is the culprit: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2) splice modifies array. So after first call, menuItems isn't the same. So use slice() instead: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.slice(2) ...

How to make a Highstocks x-axis even and regular?

The relevant code isn't included in the question, but I'll address the issue. You are using a baseSettings object and a custom settings object (lets call them customSettings) to form a chart. These two separate settings are merged using the jQuery extend function. Your problem here is that when both...

combine and merge two array into set of arrays for Highchart Pie

javascript,jquery,arrays,highcharts

Set your arr3 var as an array and push elements into it : var expense_name = amounts.expense_name; var expense_amount = amounts.expense_amt; var arr3 = []; $.each(expense_name, function(i, value){ arr3.push([value,expense_amount[i]]); }); ...

Full width arearange

javascript,angularjs,highcharts

You can manage your x-values for arearange series: data: [ [-0.5, min, max], // 0 = index for the first category, so start before [2.5, min, max] // 2 = index for the last category, so end after ], Now just set min and max for xAxis: xAxis: { type:...

How can I have same hover point color in highcharts?

well as a roundabout to your problem you could try something like this plotOptions: { .... series: { cursor: 'pointer', dataGrouping: { enabled: false }, marker: { radius: 4, states: { hover: { fillColor: function(){ return true; } } } }, turboThreshold: 1000000 } }, ...

Highcharts multiple charts, each with live data

javascript,jquery,highcharts,live

In Highcharts-land, each chart needs to be its own object. It's certainly possible to have multiple charts on the same page, but you'd have to make sure that: Each chart is instantiated separately (in this case, if you're just copying/pasting the $(document).ready part, you're probably stepping on your chart variable....

Highcharts & jQuery: add a mark by clicking with Shift key pressed, then process on release

jquery,javascript-events,highcharts

You could try this: you create an event to catch keydown. If it is shift key code, you set a reactive variable to true. Don't use a session variable, get reactive dict if you can. (you add var pageSession = new ReactiveDict(); at the beginning of your js file) you...

How to programmatically set navigator handles in highstock?

css,angularjs,highcharts,highstock

It's possible to set extremes without rangeSelector using xAxis.setExtremes() method: http://plnkr.co/edit/bRnV1lyJHmmx7YURTggq?p=preview chart: { renderTo: 'container', height: 600, events: { load: function() { var max = this.xAxis[0].max, range = 24 * 3600 * 1000; // one day this.xAxis[0].setExtremes(max - range, max); } } }, ...

Add a gap between the second and third series in a Highcharts column plot with four series displayed

javascript,plot,highcharts

You need to use pointPlacement option with number value. For example: http://jsfiddle.net/9phfzewj/34/ Play around with values, which in my case are -0.1 for lefts and 0.1 for rights. As long as series.grouping is enabled, pointPlacement refers to the previous series position....

how can i add popup to flags in highchart?

javascript,jquery,highcharts,highstock

Just add click events to your flag series, for example: point: { events: { click: function() { alert("clicked!"); } } } And example here. Just click on any "B" flag....

Highcharts (highstock) anyway to detect maximum value in a series

jquery,highcharts,highstock

This can be done by scanning you data in the events.load: events: { load: function () { var points = [] this.series.forEach(function (entry) { entry.data.forEach(function (theData) { points.push(theData.y); }); }); this.yAxis[0].update({ max: Math.max.apply(Math, points) }); } } This is a very verbose way to do it and you could probably...

Removing and re-adding series while keeping the same markers

javascript,colors,highcharts

You need to store symbol property. For example: options.marker.symbol = this.symbol; Demo: http://jsfiddle.net/ax3o8uf3/22/...

Formatting JSON data monthwise for HighCharts using MySQL

php,mysql,sql,json,highcharts

I would do this way: For every doctor do a query like this: /* get all pregrant women for a doctor, group by month and count records */ SELECT MONTH( p.reg_date ), COUNT(*) FROM nurse_dets n INNER JOIN preg_reg_other p ON n.nurse_id = p.nurse_id WHERE n.doctor_id = 1301 AND n.reg_date...

Is it possible to have different colored graphs in a single series in HighCharts?

Try out the following plotOptions: { column: { colorByPoint: true } }, colors: [ '#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1' ], Fiddle link :) Update 1: Dynamic series fiddle:) Update 2: Use the following code to have specific color for specific bar chart.series[0].addPoint({y: Math.random() * 100,...

Return Highcharts using Ajax and Python

javascript,jquery,python,ajax,highcharts

Now sure how but changing the return method helped and also the some changes with the JSON format. Every (, ' "") matters. The corrected code is bleow: @app.get('/getmyname/<jsonstring>') def getmyname(db, jsonstring): ret = """{ "chart": { "type": "column" }, "colors": [ "#00B7DE", "#00539E" ], "title": { "text": "SALES -...

Chartkick gem, limit group in pie chart and multiple series

sql,ruby-on-rails,activerecord,charts,highcharts

Some heavy thinking and @Agazoom help and I've done this. Code: @top_count = 5 @size = CountChatLine.group(:channel)[email protected]_count @data_top = CountChatLine.group(:channel).order("count_all").reverse_order.limit(@top_count).count @data_other = CountChatLine.group(:channel).order("count_all").limit(@size).count @data_other_final = {"others" => 0} @data_other.each { |name, count| @data_other_final = {"others" => @data_other_final["others"]+count }} @sum_all_data = @data_top.reverse_merge!(@data_other_final) IDK if there is a...

rCharts HighCharts X-axs grouping

javascript,jquery,r,highcharts,rcharts

This forum seems not really many active users. : ) I managed to solve my own problem after did some further study on the behavior of the rcharts and highcharts for both method above. Here is the approach for the benefits of everyone who interested to do the same thing....

Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue

It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/ And fix will be included in the next release. URL to the branch's CDN: <script src="http://github.highcharts.com/highstock.js"></script> ...

Show more data on Gauge chart with Highcharts

You are trying to use features of two Highcharts type of charts - solidgauge and gauge. It is possible to place both of them in one chart and set same (or almost the same) values for both series. Example: http://jsfiddle.net/2L1bmhb5/ $(function () { $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBackgroundImage: null,...

Highcharts X-Axis value on top of stacked column

javascript,jquery,ember.js,highcharts

The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties. But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see...

multiple Highcharts using PHP include command

php,highcharts

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> Try to make id value different for each include, e.g. $divId = 'container_' . mt_rand( 1, 1000 ); $('#<?php echo $divId;?>').highcharts... <div id="<?php echo $divId;?>" style="min-width: 310px; height: 400px; margin: 0 auto"></div>...

EmberJS Component With Graph

Just go ahead and initialize the graph when you load the component: component.js import Ember from "ember"; export default Ember.Component.extend({ confirmed: false, actions: { confirm: function() { var component = this; component.set("confirmed", true); } }, initializeGraph: function() { var component = this; // code to initialize highcharts graph here }.on('didInsertElement')...

Easier way to draw a bar chart using highcharts?

Yes, there is one thing which is redundant in your case - it's about filling up zeros. Instead provide index category and change data format a bit. For example: name: 'S2', data: [0, 5, 0] Can be changed into: name: 'S2', data: [ [1, 5] ] And number 5 will...

Legend same colour as bullet

javascript,highcharts,visualization

You can use the legend labelFormatter function to accomplish this. legend: { labelFormatter: function () { return '<span style="color:'+this.color+';">'+this.name+'</span>'; } } Reference: http://api.highcharts.com/highcharts#legend.labelFormatter Example: http://jsfiddle.net/jlbriggs/mcffqo1x/ ...

Prevent strtotime being encoded as string by json_encode

php,json,highcharts

http://json.org/ From Objects An object structure is represented as a pair of curly brackets surrounding zero or more name/value pairs (or members). A name is a string. and from Strings A string begins and ends with quotation marks. So I would say that according to the standard: yes, you should...

HighCharts JS - Getting multiple linear underlays on a scatter plot

Basically, you can combine any kind of chart type. See their demo of a scatter plot with a regression line. As an example of a scatter plot combined with a stacked area chart, see the following code and fiddle: var Y_MAX = 6; var X_MAX = 5; $(function () {...

dragging cannot get to the beginning of chart highcharts

highcharts,highstock

I set ordinal:false in xAsix and the problem was resolve

How to connect js array to highcharts

javascript,html,highcharts

try this, you can change the time interval of setTimeout function based on the number of for loops or iteration. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> Diameter: <input type="number" id="TreeDiameter" value=""> <button onclick="myFunction()">Calculate</button> <p id="demo"></p> <div...

How to set Month In Highchart same to database

php,jquery,html,mysql,highcharts

Look at this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/ with 12 column names categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] and 12 points of data data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] if you...

PHP in Javascript for PhantomJS + Highcharts

javascript,php,highcharts,phantomjs

So I've figured it out. To anyone having the same issue here's the answer: in php file calling myscript.js use the following format for passing arguments through exec(): exec('/usr/bin/phantomjs myscript.js param1 param2',$op,$er); Then in the js file do the below to get the parameters passed: var args = require('system').args; var...

Show only some series in HighCharts spline chart

javascript,charts,highcharts

I would just manipulate the JSON data before injecting it into Highcharts. Assuming your JSON API returns the array of series data... // var series = getSeriesDataViaAjax(); var showTheseIndexes = [0,2,4]; for (var i = 0; i < series.length; i++) { if (showTheseIndexes.indexOf(i) === -1) { series[i].visible = false; }...

Legend title position in

highcharts,legend

Wouldn't be easier to control that title using $(".highcharts-legend-title text") ? Then set new transform attribute. But be careful with IE8 - it's using VML, not SVG. Or in a Highcharts way: var title = chart.legend.title; title.translate(x, y); // translate legend's title Demo: http://jsfiddle.net/rum1rcum/...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts

The problem is you that created backgrounds are not part of the chart. In fact, add them in the chart.events.load event, and will be included in the exported SVG: http://jsfiddle.net/9eqh0xrj/5/ chart: { polar: true, renderTo: 'container', events: { load: modelMe } }, And example for function: function modelMe() { var...

Update Stockchart yAxis Labels Changes Positions and Label Precision

javascript,highcharts,highstock

Looks like default options are lost when updating axis. Simple workaround: http://jsfiddle.net/33cu0o9c/3/ chart.yAxis[0].update({ labels: { align: "right", x: 0, formatter: function () { return this.value; } } }); And bug is reported here....

How do I create a bar chart instead of line chart with HighCharts?

c#,asp.net-mvc,highcharts

I installed Highcharts using following command using Package manager console of Visual Studio, this install new version of DotNet.Highcharts - 4.0.0 Install-Package DotNet.Highcharts Then I Created following view (Don't forget to include JS Files). @{ ViewBag.Title = "Sample"; } @using DotNet.Highcharts; @using DotNet.Highcharts.Options; @using DotNet.Highcharts.Helpers; <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"...

Highcharts context menu hidden behind series

I see two solutions for your case: display button in front of the series: http://jsfiddle.net/uy05zby3/7/ events: { load: function() { if(!this.options.chart.forExport) { this.exportSVGElements[0].toFront(); } } } make space for the button: http://jsfiddle.net/uy05zby3/5/ "chart": { "type": "bar", "zoomType": "x", "marginTop": 30 // make more space on top edge }, ...

Changing highcharts options with buttons

Since this is a broad question and there are multiple API calls I will just point you to the series options changes you can do via series\[N\].update(). It depends on what you are trying to update. Your issue with the marker on the line not showing is a syntax error:...

How to use a 'plotWidth' calculation to position a highcharts pie

javascript,jquery,css,highcharts

I ended up doing this by editing the SVG object and calling the redraw() method on the pies. function ChartLoad() { var chart = this, centerX = chart.plotWidth * 0.5, Pie1CenterX = centerX * 1.5; var Pie1 = chart.get('Pie1'); Pie1['chart']['plotLeft'] = Pie1CenterX; Pie1.redraw(); var Pie2 = chart.get('Pie2'); Pie2['chart']['plotLeft'] = Pie1CenterX+90;...

Tooltip is not hidden after formatting in highchart

Figured it out. Returning false instead of null is working tooltip: { formatter:function() { if(this.y != 0) { return this.point.name + ':' + this.point.sizeText; } else { return false; } } } ...

Highcharts ColumnRange - Display time range on yAxsis instead of Date

javascript,angularjs,highcharts,boxplot

I resolved the issue . All I changed is I assigned "from": 1 for all the varialbes data in arraylist and it starts from bottom of the chart till to reach to the end point to:... Here is jsfiddle Thanks...

Multiple Boxplots in one HighCharts chart

okay, problem was related to declaring the chart-type as a boxplot. in native highcharts it's done like this (as can be seen in the fiddle): chart: { type: 'boxplot' }, However, when using angularjs highcharts-ng module, we need to use the following code: options: { chart: {type: 'boxplot'} }, That's...

How to display no data found in highcharts

javascript,math,highcharts

You can use no-data module which allows do that. Ref: http://code.highcharts.com/modules/no-data-to-display.js Example: http://jsfiddle.net/6o8o03fe/1/...

Highcharts Gauge chart is rounding down max number

Add endOnTick:false (http://api.highcharts.com/highcharts#yAxis.endOnTick) to your axis. For example yAxis: { min: 0, max: 666772, title: { text: 'Quarter 1' }, endOnTick:false } Here's the working sample http://plnkr.co/edit/Vbn1lpMIv8qvSfs65jL4...

How can I combine highcharts with different but similar x-axis categories?

I don't think there is an easy way to do it. Or rather easier than: making unique array of categories manually filling up array with 0 values, when category is missing For example: // union without diplicates: // taken from: // http://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items Array.prototype.unique = function() { var a = this.concat();...

Issue on Drilling Down and Up in Highcharts.js Using External Dom Buttons

javascript,highcharts,datatable

You need to move the button binding up into the scope of the document ready (which is confusing, you have two variations of document ready -- one on the outer, one on the inner -- you only need one). You also can expose some variables to make things easier. So...

highcharts datatable - function parameters

Call drawTable function in load function, instead of reference. load: function(){ Highcharts.drawTable(this, 310, 100, 0, '', 20, 20, 2.5) } Example: http://jsfiddle.net/z9zXM/1035/...

How do I catch a click event on a polygon in HighCharts without having the tooltip popping up

events,highcharts,polygon

Polygon series can be accessed via event.currentTarget. Example: http://jsfiddle.net/ow72qjaw/ Tooltip can be disabled by setting: tooltip: { enabled: false } Hover effects can be disabled for series by using proper settings: states: { hover: { enabled: false } } If you want to disable tooltip for selected series only you...

Highcharts error loading maps plugin

javascript,jquery,highcharts,highmaps

Use following libraries in the following order <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.2.min.js'></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script type='text/javascript' src='https://code.highcharts.com/maps/1.1.6/modules/map.js'></script> ...

How to remove year from Highchart

you can use xAxis-> labels -> formatter function to foramt the date as you want. Here in your case since you have not mentioned the start of the time and interval for those value , Library started the plotting from its default values. now the same way as you did...

Highchart Treemap: forcing layout on 3 lines

That's not really how treemaps are intended to work. I would try a heatmap instead. Example: http://jsfiddle.net/jlbriggs/vk6sfdLs/ ...

In PHP , How to convert JSON into highchart supported format [closed]

javascript,php,arrays,json,highcharts

Use foreach to loop through one of the properties, and build an associative array using that element and the values from the corresponding element in the other property. $result = array(); foreach ($input['name'] as $i => $name) { $result[] = array('name' => $name, 'data' => array_map('intval', array_values($input['data'][$i]))); } ...

How to show legend like Maps' in Line diagram in Highcharts?

javascript,json,angularjs,highcharts

In general, it's not supported, but you can try to add such functionality from maps to the standard charts: http://jsfiddle.net/w9nuha8n/ (function (H) { // add colorAxis H.seriesTypes.line.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; H.seriesTypes.line.prototype.optionalAxis = 'colorAxis'; // draw points and add setting colors H.wrap(H.seriesTypes.line.prototype, "translate", function (p) { p.call(this); H.seriesTypes.heatmap.prototype.translateColors.call(this); }); //...

Format data to be used in Highcharts series

interesting question, I normally use either angular.forEach or a library called underscore to handle data processing in angularJS. Here is the forEach version. data = $http.get(); // suppose you have the data result = []; angular.forEach(data.models, function(item) { // simple way is to take item as the original form result.push(item);...

Highchart - Changing label text of the yaxis programatically

variables,highcharts,threshold,adaptive-threshold

Have a look at axis.update(). This will let you modify just about anything about an axis. To get which axis to update you can specify by the index (the order in which you added he axis starting at 0).

Highcharts variable threshold

You can try to mix line serie and areasplinerange, then set proper colors. series: [{ type: 'spline', data: [3, 2, 3, 5, 4, 10, 12] }, { fillColor: 'green', marker: { enabled: true }, data: [ [3, 3], [2, 5], [3, 3] ] }, { fillColor: 'red', marker: { enabled:...

The data is not completely displayed in the stack bar Highcharts

javascript,highcharts,highstock

Check this fiddle: http://jsfiddle.net/vwmcuvwd/1/ Combination of these 3 properties can help you: crop: false, overflow: 'none', allowOverlap: 'true' ...

Unable to set xAxis min for Highstock (Highcharts)

Three things to mention: rangeSelector.selected option prevents min, remove that one xAxis.min is not enough, add also xAxis.max to see the change it won't work until you will set xAxis.ordinal to false. Ordinal option displays points equally on the available space, so there is no place for "empty space" And...

Highcharts Bar Chart - Labels Not Appearing in Bar

highcharts,data-visualization

Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category. Demo with all labels: https://jsfiddle.net/p55t0bmf/1/...

Prevent y-zoom for specific series/y-axis on highcharts

It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.

Custom tooltip names Pie Chart

javascript,charts,highcharts

How about changing format fo data to array of objects? For example: [{y: 300, suffix: ""}, {y: 700, suffix: " remaining" }] Then in tooltip set add suffix info: return 'Daily KB: <b>'+ this.point.y +'</b>' + this.point.options.suffix; ...

Highcharts issue updating chart type: not recognizing highcharts functions

jquery,highcharts,highstock

http://jsfiddle.net/2j1g200g/29/ var options = { chart: { type: 'line', renderTo: 'chart_example' }, title: { text: 'Traffic' }, xAxis: { categories: ['November', 'December', 'January'] }, yAxis: { title: { text: 'Views' } }, series: [{ name: 'Hello', data: [50, 30, 60] }] }; chart = new Highcharts.Chart(options); options.chart.type = 'bar'; chart...

How to add custom message in Highchart's printed image?

I see two options, both are based on load event. One is to check chart.options.chart.forExport flag. When flag is set to true, then add extra elements on the chart using chart.renderer. See demo and more info about the Renderer. Second option, is to do the same, but in exporting.chartOptions.chart.events.load callback....

Increment x axis value by 10 instead of 1

javascript,html,charts,highcharts

I was looking for pointInterval, which not only set the value of the tick but also of the value.

Highcharts (grouped_category styling) and tooltip formatter not working

javascript,highcharts,scatter

1) There's not such option like series.tooltip.formatter. Only series.tooltip.pointFormat or other formats. For example: tooltip: { pointFormat: "{point.value}" } Example: http://jsfiddle.net/TFhd7/367/ 2) I think this is connected to the design changes between Highcharts 2.x and 4.x. See more in this ticket. And example after setting labels.x to -5: http://jsfiddle.net/TFhd7/368/ Regarding...

Highcharts Control Basic DrilDown Using Dom

javascript,css,charts,highcharts,typescript

Well, this is not part of the API, but as you noticed, to drill up, you need to call chart.drillUp(). To drilldown, it's a bit different and depends where you want drilldown. In short call method: chart.xAxis[0].drilldownCategory(category_index);, see: http://jsfiddle.net/vncnwd66/2/ However, there is one limitation: you can't drilldown from second level...

Center of chart(pieChart)

Pie center can be calculated using pie series center array (x and y coordinates), plotLeft and plotTop. Using renderer.text it is possible to add text. In redraw event additionally rendered text should be adjusted to stay in the center of pie. Example: http://jsfiddle.net/1917s4pL/ $(function () { var chart = new...

Highchart Z-Index practice not functioning

You can disable events for dataLabels in CSS: .highcharts-data-labels { pointer-events: none; } And demo: http://jsfiddle.net/gdkazb9q/4/ Full solution for the above case by @Gags : events:{ mouseover: function() { $(".highcharts-data-labels").css("pointer-events","none") }, mouseout: function() { $(".highcharts-data-labels").css("pointer-events","visibleStroke") } } } ...

x Axis Labels are cut off from Highcharts Column Chart