I'm trying to remove the white background on a simple bar chart.
I've tried
backgroundColor: null
backgroundColor: 'rgba(255,255,255,0)'
None seem to set the background color. Any ideas?
jsfiddle example here
$('#container').highcharts({
credits: {
enabled: false
},
backgroundColor: null,
You are trying to use settings for the chart object at the root object level.
Move them into chart, and you're all set:
chart: {
type: 'bar',
spacing: [0, 0, 0, 0],
backgroundColor: null
}
Fiddle:
http://jsfiddle.net/jlbriggs/xv26bet4/1/
Related
I have a chart with two combine chart types, line and column. I would like, as in the image below, to have my column chart at the bottom and my line chart a bit higher up and the line chart label to start hihger up as well.
I want something like:
yAxis: labels{y: -100}
My problem with this is that this only moves the labels, not the chart data.
My try so far can be found here: http://jsfiddle.net/32r7rctt/2/
It is possible to set 'height' and 'top' properties of the yAxis. Example: https://jsfiddle.net/mtvy24rj/1/
yAxis: [{
height: '70%',
top: '0%'
}, {
title: {
text: null
},
height: '30%',
top: '70%',
labels: {
enabled: false
},
}],
I want to set a border for a pie,but when there is no data the pie become this
How to realize it?
You can catch the load event, check series.data length and if its empty, then use renderer to add empty circle.
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events:{
load: function() {
var chart = this,
series = chart.series[0],
center = series.center;
if(series.data.length === 0) {
chart.renderer.circle(center[0],center[1],100)
.attr({
fill:'rgba(0,0,0,0)',
stroke: 'red',
'stroke-width': 1
})
.add();
}
}
}
},
Example:
http://jsfiddle.net/u6tax8x4/
Pie with default border stroke will show up in the newest versions. I guess it is just the versioning issue here.
Please update the highcharts to latest version here : https://code.highcharts.com/zips/Highcharts-8.0.0.zip
I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.
},function(chart){
chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})
This works fine, except for the fact that the left border stroke doesn't show the full width i.e.
These are my plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
stacking: 'normal',
pointPadding: 0.1,
borderWidth: 0,
lineWidth: 0,
dataLabels: {
enabled: true,
formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
useHTML: true,
connectorWidth: 1,
style: {
fontSize: "14px",
color: '#FFFFFF',
fontWeight: 'normal'
}
}
}
},
Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:
AFTER HOVERING
Any pointers to resolving either of these issues would be appreciated.
FIXED - Hover Issue
I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.
If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}
FIXED - SVG Border issue on Stacked charts
It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.
$(".highcharts-series:gt(0) rect").each(function(index,value) {
$(this).attr("height",$(this).attr("height")-1);
$(this).attr("y",parseInt($(this).attr("y"))+1);
I have got problem. Around my 3D Pie Highchart, there is white space, but i have got Background, set by HTML, and i want to see it. So please how do I remove it?
Add backgroundColor: 'transparent',
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
backgroundColor: 'transparent',
},
...
DEMO
set margin to 0
margin: [0,0,0,0]
here is a jsfiddle link for that
I hope this is the space you are looking to remove.
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}}}