Normally I show the highchart graphs on my website with a transparent background.
My website has a white background with an very light colored image in it.
But when I view the graph in full screen (exporting.js), it shows it with a black background.
Would be perfect if I could indicate that the normal background is transparent but the background in 'view in full screen' mode should be white.
You need to update colour every time when you enable and disable full view. Use chart events fullscreenOpen and fullscreenClose to achieve that.
chart: {
backgroundColor: 'transparent',
events: {
fullscreenOpen: function() {
this.update({
chart: {
backgroundColor: 'white'
}
})
},
fullscreenClose: function() {
this.update({
chart: {
backgroundColor: 'transparent'
}
})
}
}
},
Demo:
https://jsfiddle.net/BlackLabel/q8hpeLu3/
API References:
https://api.highcharts.com/highcharts/chart.events.fullscreenOpen
https://api.highcharts.com/highcharts/chart.events.fullscreenClose
How can I show labels for each bar in Highcharts as shown in the image below?
I think the solution you are looking is some thing like this.
This canbe achieved using the datalabels and placing them properly at the position you have desired to.
plotOptions: {
column: {
dataLabels: {
enabled: true,
y: 0,
verticalAlign: 'bottom',
inside: true,
color: 'white',
formatter: function(e) {
return this.series.name
}
}
}
},
You can set overflow to 'none' and crop to false to be able to display data labels out of the area plot.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
Example:
http://jsfiddle.net/5m0kkbhf/
I need to change the font color of the axis title after it has been created. I have tried all variations on the commands below but can't get anything to work.
Chart.yAxis[0].setOptions({ yAxis: { title: { styles: { color: '#FFFFFF' } } } });
Chart.yAxis[0].axisTitle.attr({ styles:{ color:"#FFFFFF" } });
Again, I can do this upon creation of the plot, I just need to find the option command or style command to update this dynamically.
Thanks
You can use update() function.
http://jsfiddle.net/sbochan/xm2QA/
chart.yAxis[0].update({
title:{
style:{
color:'red'
}
}
});
http://api.highcharts.com/highcharts#Axis.update()
I need to disable the hover attribute of legend items because I am using Highcharts on mobile platforms. Sadly, making a legendItemClick event does not solve the problem as hovering still occurs.
I was encouraged to see that this issue came up on the old support site for highcharts back in 2011. The thread can be found here. I was particularly glad to see the last jfiddle example and the function declared in it.
Unfortunately, the only thing that worked for me was the workaround of changing the setHoverStyle to null. This isn't great though since the hover action still fires and makes navigating the legend and chart unresponsive. The rest of the suggestions in the above thread resulted in the chart not being rendered.
Granted, it might be because I had a difficult time translating the example to my purposes - honestly, I do not know where to call the function and everywhere I have tried has failed. My JavaScript file is set up along the lines of
var chartDefinition = {
chart: {
renderTo: 'chart_content',
type: 'column'
},
colors: [
'#619ED6',
'#6BA547',
'#F7D027',
'#E48F1B',
'#B77EA3',
'#E64345',
'#60CEED',
'#9CF168',
'#F7EA4A',
'#FBC543',
'#FFC9ED',
'#E6696E'
],
title: {
text: ''
},
...
column: {
shadow: false,
borderWidth: 1,
events: {
click: function() { return false; },
legendItemClick: function() { return false; }
},
dataLabels: {
enabled: false,
color: '#222',
style: {
fontFamily: 'sans-serif',
fontSize: '13px',
fontWeight: 'bold'
}
}
}
},
series: []
};
Listing and setting the various highcharts attributes.
Does anyone know how to disable this hover attribute or where the proper place would be to call the function?
There are a few solutions to implement this. There's no built-in option to change that (as of 06.2022).
Try to disable mouseover for legendGroup, not legendItem.
Demo: http://jsfiddle.net/Cp7xh/10/
Disable pointer-events in CSS:
.highcharts-legend {
pointer-events: none;
}
Demo: http://jsfiddle.net/BlackLabel/ebrodhk4/
A plugin that prevents Highcharts Core from adding events:
Plugin:
(function(H) {
H.wrap(
H.Legend.prototype,
'init',
function(proceed, chart, options) {
if (options.enableMouseTracking === false) {
this.setItemEvents = false;
}
proceed.apply(this, [chart, options]);
}
);
})(Highcharts);
Usage:
legend: {
enableMouseTracking: false,
itemStyle: {
cursor: 'auto'
}
},
Demo: https://jsfiddle.net/BlackLabel/ogqv2sya/
I have have a column chart which has a number of categories, each with a single data point (e.g. like this one). Is it possible to change the colour of the bar for each category? i.e. so each bar would have its own unique colour rather than all being blue?
You can also set the color individually for each point/bar if you change the data array to be configuration objects instead of numbers.
data: [
{y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20] // default blue
Example on jsfiddle
Also you can set option:
{plotOptions: {column: {colorByPoint: true}}}
for more information read docs
Add which colors you want to colors and then set colorByPoint to true.
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
],
plotOptions: {
column: {
colorByPoint: true
}
}
demo
Reference:
http://api.highcharts.com/highstock#colors
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Yes, here is an example in jsfiddle: http://jsfiddle.net/bfQeJ/
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
The example is a pie chart but you can just fill the series with all the colors to your heart's content =)
You can add colors array in high chart graph for changing the color of graph. You can re-arrange these colors and you can also specify your own colors.
$('#container').highcharts({
colors: ['#2f7ed8','#910000','#8bbc21','#1aadce'],
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
Like mentioned by antonversal, reading the colors and using the colors option when creating the chart object works.
var chart3 = new Highcharts.Chart({colors: ['#458006', '#B0D18C']});
just put chart
$('#container').highcharts({
colors: ['#31BFA2'], // change color here
chart: {
type: 'column'
}, .... Continue chart
Just add this...or you can change the colors as per your demand.
Highcharts.setOptions({
colors: ['#811010', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
plotOptions: {
column: {
colorByPoint: true
}
}
});
add properties:
colors: ['Red', 'Bule', 'Yellow']
This worked for me. Its tedious to set all the colour options for a series, especially if it's dynamic
plotOptions: {
column: {
colorByPoint: true
}
}
{plotOptions: {bar: {colorByPoint: true}}}