Develop Reference

highcharts scatter change point color

How can I change the color of scatter plot point at click?
I can't find the proper solution to this based on this example
My problem is that I when I capture the click event, I can't find the proper place for the fillColor property of the point.
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter'
},
series: [{
data: [194.1, 95.6, {y:54.4,fillColor:'#FF0000'}]
}]
});
});

Something like this should do
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var pt = this.options;
pt.fillColor = 'black';
this.update(pt, true);
}
}
}
}
}
Here is the updated demo.

HighCharts with Dynamic Data not working

I have a ASP.NET MVC project with SignalR.
I have a page with a HighChart and the script looks like this:
$(function () {
window.Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10
},
title: {
text: 'GMAS Queues'
},
xAxis: {
type: 'datetime',
tickInterval: 500,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Queue Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Processing Queues'
}]
});
});
$.connection.hub.logging = true;
// Reference the auto-generated proxy for the hub.
var chartData = $.connection.processingQueuesHub;
// Create a function that the hub can call back to display messages.
chartData.client.updateQueueCounts = function (data) {
//$.each(data, function(i, item) {
// // Add the message to the page.
// $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName)
// + '</strong>: ' + htmlEncode(item.Length) + '</li>');
//});
// set up the updating of the chart.
var series = chart.series[0];
$.each(data, function (i, item) {
if (item.QueueName == "Queue A") {
var x = Date.parse(item.Date),
y = item.Length;
series.addPoint([x, y], true, false);
}
});
};
However, I see the graph but not the points.
The strange part is the series data points are there:
Anyone know why HighCharts is not rendering the points?
Thanks, Bill N

I have to thank my good friend and co developer for figuring this out. He is a smarter and braver man than me. :) He went to the highcharts source and found that the highcharts breaks if you add to the graph series before the initial animation is completed. The animation is why the clip-rect is zero-width (it animates from zero to full width over 1s when you first create the chart). You end up adding a point to the series before this animation even really starts. This kills the animation but it doesn’t fix the width of the clip-rect. The fix is to add animation is false for the series.
series: [{ name: 'Processing Queues', data: [], animation: false }]

It looks like you are not defining what your chart.series is until it is created. The line in your ajax is as follows and its not waiting for DOM ready:
var series = chart.series[0];
But you do not define chart until $(document).ready(function () {.... Try keeping your chart object in scope of your ajax.

add event to x-axis labels of bar highchart

I am trying to retrieve the text of a label on the char x-axis by clicking on it. I am using bar chart and the code is the following:
var chart = new Highcharts.Chart({
chart: {
type: 'column',
backgroundColor: '#eaedf1',
zoomType: 'x',
renderTo: 'container'
},
plotOptions: {
series: {
cursor: 'pointer',
pointWidth: 10,
point: {
events: {
click: function (event) {
console.log(event.point.name + " " + this.y);
}
}
}
}
},
title: {
text: 'Total Flow Types'
},
xAxis: {
type: 'category',
labels: {
rotation: -90
}
},
yAxis: {
min: 0,
title: {
text: 'millions'
}
},
legend: {
enabled: false
},
series: [{
name: 'Flow Types'
}]
});
Then by clicking on a button the chart gets populated using ajax which works fine. By checking the dom of the chart I saw that each of the labels is text /text. They are part of g/ element with a class highcharts-axis-labels highcharts-xaxis-labels. So I've tried retrieving the values using jquery like:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
or just
$('body').on('click', 'text', function () {
console.log($(this).text());
});
This all is part of the document.ready function. Unfortunately none of these retrieves the text of a x-axis label?

Instead of:
$('body').on('click', 'g.highcharts-axis-labels.highcharts-xaxis-labels text', function () {
console.log($(this).text());
});
Use this:
$('.highcharts-xaxis-labels text').on('click', function () {
console.log($(this).text());
});
You should not connect classes highcharts-axis-labels and highcharts-xaxis-labels with a dot. And also the class highcharts-xaxis-labels is enough to add the event on. Here's the fiddle: http://jsfiddle.net/8sxLr5j8/

You can use extension which allows do it.

Scrolling over highcharts graph

Here's my issue:
I am using the phonegap framework to develop a hybrid app, and I need this application to have graphs for which I had decided to use the highcharts library.
The problem is that I can't seem to be able to scroll after touching on the chart (at least while touching inside the selected portion of the image).
What I want to do is prevent the chart from taking any events and show a plain graph with anything being highlighted and be able to scroll even if im doing it over the graph.
Code:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'containerBar',
animation: false,
type: 'bar',
events: {
click: function(event){
return false;
}
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Fruit Consumption'
},
plotOptions: {
bar: {
events: {
click: function(event){
return false;
},
mouseOver: function(event){
return false;
},
legendItemClick: function () {
return false;
}
},
states: {
hover: function(){
alert("Allow");
}
}
}
},
events: {
click: function(e) {
alert("Click");
}
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
tooltip: {
enabled: false
},
series: [{
name: 'Jane',
data: [1, 3, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});

Try this link ....
Just make a separate javascript file ,copy paste the code and include the file

To follow up for folks reading this question and its answers, the issue with scrolling and Highcharts visualizations was resolved with Version 3.0.1 (2013-04-09). Highstock, a sibling of Highcharts, received a similar update with Version 1.3.1 (2013-04-09).
Added new option, tooltip.followTouchMove. When this is true, the
tooltip can be moved by dragging a single finger across the chart,
like in Highcharts 2. When it is false, dragging a single finger is
ignored by the chart, and causes the whole page to scroll. This
applies only when zooming is not enabled.
Further enhancements were made in Highcharts Version 4.1.0 (2015-02-16):
Made tooltip.followTouchMove true by default, and allowed page scroll
at the same time.
For the complete Highcharts change log, see http://www.highcharts.com/documentation/changelog.

The problem is caused by Highcharts capturing all touch events and making them do nothing. I solved this by basically just overlaying a div over the chart area on mobile devices and preventing those events from reaching highcharts elements (so they are free to trigger default behavior, i.e. page scrolling). I used this JS (assuming you are also using JQuery or equivalent):
$('.highcharts-container').each(function() {
var dragHandle;
dragHandle = $('<div class="chart-drag-handle">');
$(this).append(dragHandle);
dragHandle.on('touchstart', function(e) {
e.stopPropagation();
});
dragHandle.on('touchmove', function(e) {
e.stopPropagation();
});
dragHandle.on('touchend', function(e) {
e.stopPropagation();
});
dragHandle.on('touchcancel', function(e) {
e.stopPropagation();
});
});
The elements added would need to be styled to overlay the chart, I did that like so:
.highcharts-container .chart-drag-handle {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 100;
}

Open Highcharts in modal window

I'm working on a site where I use Highcharts quite heavily for presenting data in charts. I want to user to be able to "zoom" each chart into a modal window for better readability.
I know how to manipulate the chart with its API, but I'm not quite sure how I can clone the chart and refer to the new chart with an variable?
I've done alot of searching, and all I've found is how to open in modal window with Highcharts own modal library, but I'm using a modal library called Lightview.

I have got this working using jQuery modal panel.
On click of original chart I am calling a javascript function popupGraph which will create a new highchart by merging the options of the existing highchart. On close event of modalPanel I am destroying the highchart that we have created for popup.
Hope this helps..
Code for actual chart that I show in small size.
trackingChart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: loadChart,
click: function() {
popUpGraph(this);
}
}
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
},
legend: {
layout: 'horizontal',
backgroundColor: '#FFFFFF',
align: 'center',
verticalAlign: 'bottom',
x: 10,
y: 0,
floating: false,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.x +': '+ this.y +' points';
}
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
exporting: {
enabled: false
},
series: [{
data: []
}, {
data: []
}]
});
Code for function opening modal panel
function dummy() {}
function popUpGraph(existingChart) {
var options = existingChart.options;
var popupChart = new Highcharts.Chart(Highcharts.merge(options, {
chart: {
renderTo: 'popup_chart',
height:300,
width:700,
zoomType: 'x',
events: {
load: dummy,
click: dummy
}
}
}));
$( "#dialog").dialog({
autoOpen: false,
height: 350,
width: 750,
modal: true,
show:'blind',
close: function(event, ui) { popupChart.destroy(); }
});
$("#dialog").dialog("open");
}

You can get the new range by the selection event and then get the respective position from the chart serie.
See my example.
http://jsfiddle.net/ricardolohmann/sZMFh/
So, if you want to show it inside the lightbox you have to change the following code:
chart2 = new Highcharts.StockChart({
chart: {
renderTo: 'container2'
},
series: newSeries
});
To this one, and set the container2 display to none
Lightview.show({ url: 'container2', type: 'inline' });

Further to Santhosh's answer, I added this at the end of popupGraph function to get data loaded up:
$.each(existingChart.series, function (prop, val) {
popupChart.series[prop].setData(val.options.data);
popupChart.series[prop].update(val.options);
});