We Keep Coding

force Highcharts redraw animation when changing graph type

I have a bunch of graphs that by default, come out as line graphs. I've added buttons to the side of my graph to allow the user to change it to a pie, bar, areaspline, or back to line.
When the user clicks the button, it runs this function:
function change_graph_type(moduleNumber, type) {
graph_type = type;
var chart = $('#graph' + moduleNumber).highcharts();
for ( i=0;i<chart.series.length;i++ ) {
chart.series[i].update({
type : graph_type
});
//chart.redraw(); //I've tried adding this here to no avail...
}
}
The code changes each series from e.g. - line to bar, or bar to areaspline, but I cannot figure out how to get the "animation" when the user toggles over to that new graph type, so it only runs the very first time the user generates the chart.

i tried many ways but there is no such function which fires animation after redraw
so created this below quick and dirty method which might help
http://jsfiddle.net/msekpj8m/
$(function() {
var chartOptions = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
showEmpty: false
},
chart: {
type: 'column'
},
yAxis: {
showEmpty: false
},
series: [{
allowPointSelect: true,
data: [ // use names for display in pie data labels
['January', 29.9],
['February', 71.5],
['March', 106.4],
['April', 129.2],
['May', 144.0],
['June', 176.0],
['July', 135.6],
['August', 148.5], {
name: 'September',
y: 216.4,
selected: true,
sliced: true
},
['October', 194.1],
['November', 95.6],
['December', 54.4]
],
marker: {
enabled: false
},
showInLegend: true
}]
};
var container = $('#container');
container.highcharts(chartOptions);
// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function(i, type) {
$('#' + type).click(function() {
container.highcharts().destroy();
chartOptions.chart.type = type;
container.highcharts(chartOptions);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

Create graph in tooltip of highchart [duplicate]

This question already has an answer here:
Create chart in tooltip formatter
(1 answer)
Closed 8 years ago.
Have some data to display as column in highchart. The data is about registrations per month in columns.
Following is the link for jsfiddle:
http://jsfiddle.net/CkkbF/161/
In each tooltip of graph want to show another column chart.
$(function () {
// Registrations Data
var data ={10:{"Morning":2,"Afternoon":3,"Night":5},//Jan
12:{"Morning":2,"Afternoon":5,"Night":5},//Feb
15:{"Morning":5,"Afternoon":3,"Night":7},//Mar
17:{"Morning":8,"Afternoon":3,"Night":6},//Apr
18:{"Morning":2,"Afternoon":3,"Night":13}, //May
22:{"Morning":12,"Afternoon":3,"Night":7},//June
15:{"Morning":2,"Afternoon":8,"Night":5},//July
27:{"Morning":12,"Afternoon":11,"Night":4},//Aug
17:{"Morning":2,"Afternoon":5,"Night":10},//Sep
10:{"Morning":2,"Afternoon":3,"Night":5},//Oct
14:{"Morning":2,"Afternoon":4,"Night":8},Nov
24:{"Morning":12,"Afternoon":7,"Night":5},DEc
}
var series_data=[]
for (key in data) {series_data.push(parseInt(key))}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: series_data
}]
});
});
E.g. In above jsfiddle example
So on hover of Column associated with January data , it should show another column highchart in tooltip {"Morning":2,"Afternoon":3,"Night":5}.
i.e. In morning 2, Afternoon 3 and Night 5 registrations.
Any help how to achieve this.

To make a tooltip of a point contain another chart you need to do 3 things (I am sure there are other ways but this is the basic method). I do not remember where I pulled this from as it is not my code but it works:
1 First set up data to use for each point.
var data0 = [12, 12];
var data1 = [6, 12];
var toolTipData = [];
toolTipData.push(data0);
toolTipData.push(data1);
2 Then build a method to pull the appropriate data points out.
tooltip: {
useHTML: true,
formatter: function() {
var i = this.key;
setTimeout( function() {
$("#hc-tooltip").highcharts({
series: [{
data: toolTipData[i]
}]
});
}, 10)
}
},
3 Now you need to put the chart you just made into a container.
tooltip: {
useHTML: true,
formatter: function() {
var i = this.key;
setTimeout( function() {
$("#hc-tooltip").highcharts({
series: [{
data: toolTipData[i]
}]
});
}, 10)
return '<div id="hc-tooltip"></div>';
}
},
The setTimeout is used to smooth out the creation of the tooltip/chart. So, what we are doing here is creating an array (toolTipData) and populating it with the data (data0 and data1) that will be used for each point's tooltip chart. We access the toolTipData via the index of the point we are showing the tooltip for.

I'm not sure about having a chart inside the tooltip, but you can use HTML such as the following example from the API docs:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/tooltip/footerformat/
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
}
No 100% sure how you would pass the data into it though...

Highcharts min y-axis value

Is it possible to set a min y-axis value when the series values are the same?
For example:
http://jsfiddle.net/6hyfk/1/
I would like to see 0.00019 as y-axis value.
If i change it to:
series: [{
data: [0.00019,0.00020,0.00019,0.00019]
}]
it looks a lot better.

So the answer largely depends on your data. If for example, you know your values are all positive, setting a yAxis min helps your data display a bit better. You know your data better than I, so I'd look at the yAxis settings and see what you can change to get a better result, but for example, this is a JSFiddle that sets a minimum value:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickLength: 20
},
yAxis: {
min: 0
},
series: [{
data: [0.00019,0.00019,0.00019,0.00019]
}]
});
});
http://jsfiddle.net/gTG2z/

You can manually set the min and max on the X axis.
yAxis:{
min: 0,
max: .001
},
http://jsfiddle.net/6hyfk/2/

If you know what range is in your series, you can set accordingly minRange, so Highcharts will render more ticks as expected. For example: http://jsfiddle.net/Fusher/6hyfk/3/ Good thing about minRange is that it will work also for another values like that: http://jsfiddle.net/Fusher/6hyfk/5/

Probably,you don't need to hardcode min,max values.Do calculation for min and max and set to y Axis as shown below,
$(function () {
yMin = Math.min.apply(Math,data); // Find Min
yMax = Math.max.apply(Math,data); //Find Max
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
min: yMin,
max: yMax
},
series: [{
data: data //Array of values
}]
});
});

Highchart - change color of one x-axis label only

So I know how to change the color of x-axis labels in Highchart, which is described here.
http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-style/
But what if I want to change the color of just ONE label, not all the labels? How do I apply style to individual labels?

You can also use the label-formatter to set the style. Full example on jsfiddle:
labels: {
formatter: function () {
if ('Jun' === this.value) {
return '<span style="fill: red;">' + this.value + '</span>';
} else {
return this.value;
}
}
}

I understood that you want to change the color for a specific item inside the x-axis.
I looked at the API but i didn't found an easy way to do it.
Since you can set a callback for the "chart ready event":
Chart (Object options, Function callback) :
Parameters
options: Object The chart options, as documented under the heading
"The options object" in the left menu.
callback: Function
A function to execute when the chart object is finished loading and rendering. In
most cases the chart is built in one thread, but in Internet Explorer
version 8 or less the chart is sometimes initiated before the document
is ready, and in these cases the chart object will not be finished
directly after calling new Highcharts.Chart(). As a consequence, code
that relies on the newly built Chart object should always run in the
callback. Defining a chart.event.load handler is equivalent.
Returns: A reference to the created Chart object.
You can do it in a dirty way:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginBottom: 80
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
style: {
color: 'red'
}
}
},
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]
}]
},
function(c){
// this relies in that te xAxis is before the yAxis
// also, setting the color with color: #ABCDEA didn't work
// you have to use fill.
$(".highcharts-axis:first text").each(function(i, label){
var $label = $(label);
if($label.children().text() === "Jun") {
$label.css({fill: "blue"});
}
});
// You also can to something like:
$(".highcharts-axis:first text:eq(6)").css({fill: "green"});
})
});​
Hope this helps you

Note that when you use the highcharts exporting server at exporting.highcharts.com to render images for your graphs, javascript formatters will not be executed.
Fortunately highcharts translates some html tags and style attributes of individual label and title strings into equivalent SVG styling, but it is quite finicky about how it parses the html. It will strip tags that are using single quoted attributes, you need to use double quotes. Also, nesting a <br/> tag inside another tag will not work.
So if you want two lines of text colored red for example, you get:
<span style="color: #ff0000">First line</span> <br/>
<span style="color: #ff0000">Second line</span>

I am using dataLabels in a doughnut pie chart. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.
Just sharing because my search brought me here.
data: outerData,
dataLabels: {
formatter:
function () {
if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
} else {
return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
}
}
}

xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
formatter: function () {
if ('Jan' === this.value) {
return '<span style="fill: blue;">' + this.value + '</span>';
} else {
return this.value;
}
}
}
},

highchart: add images to top of chart on every column

Does anyone know if it's possible to create something like this in Highcharts:
It's about the weather icons on the top. I added them as a "scatter graph" which is nice, so the images/graph can be disabled. But I want them always at the top. For example: y=20px or something. Is it possible to do this with Highchart? I know set their data to "30 celcius" but that would mess up the graph if it the temperature would go up to 30 degrees.

You can use a trick of having two x-axes, one with images and offset'ed to the top of the chart and one with the usual labels at the bottom:
xAxis: [{
offset: -290,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}, {
linkedTo: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
Full example on jsfiddle

I found a solution by chance because of a logging code I forgot to remove. You can access the data inside the method formatter using "this":
...
plotOptions: {
series: {
dataLabels: {
useHTML: true,
enabled: true,
x: -50,
y: -50,
formatter: function(){
console.log(this);
return '<span>'+this.y+'</span><br/>'+this.series+'<img src="'+this.key+'" />';
},
}
...
This code surely isn't working, but shows up the idea, doesn't it?
Hope it helps!

Given that highcharts is just SVG you can always go directly and manipulate the SVG to show the images you want, usually with just CSS. You can inspect the chart with Chrome's web inspector and find the elements you want to style. I have to warn you though that having customized highcharts myself in the past has made upgrading to newer versions difficult.

You can add another scatter plot to your series that contains specific markers: http://jsfiddle.net/ZZ7Kd/135/

You can use Renderer.image() to add images in any place on chart
http://api.highcharts.com/highcharts#Renderer.image()