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.
Related
I'm trying to create a pie chart with custom colors. My legend colors update just fine but the pie itself is not changing its colors. I've tried many different ways like setOptions:
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Or change color for each pie separately in series:
series: [{
type: 'pie',
keys: ['name', 'y', 'color'],
data: [
{ name: "KPI", y: 60, color: '#f3c200' },
{ name: "-KPI", y: 0, color: '#e87e04' },
{ name: "Remains", y: 40, color: '#e2000f' }
],
size: '60%',
innerSize: '40%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]
And other methods too, but the output is always the same, legend color changed, pie colors did not. When I test my code in a fiddle it works just fine, so it's a local issue, but I do not see where, because every piece of code is the same. So I'm not sure is it a bug, missing package, or imported styles. Please advise if you faced this issue.
Here's my code in a fiddle:
"http://jsfiddle.net/vnfkw9ds/"
In this post, Rohitesh in the comments had the same issue, but it was never resolved:
https://stackoverflow.com/a/10074739/11745912
Ok, looks like if you add highcharts.css to you styles you cannot do any color modifications for some reason. Could not find an answer for two days, but after posting it here, the answer found me.
I'm using Highcharts to generate a heatmap grid with around 10k grid cells. The heatmap renders in under a second without dataLabels. However if I enable dataLabels, which are necessary for my project, the same heatmap takes 10 seconds to render. I tried setting useHTML to true, and that renders in 30+ seconds. I'm not doing any work within the dataLabel rendering. Is there any way to speed this up?
The example with 10k cells in the heatmap with enabled data labels is here.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
xAxis: {
min: 0,
max: 99
},
series: [{
data: data,
dataLabels: {
enabled: true
}
}]
});
No-opt rendering time: 33.5 s
From the profiler I can say thet there are two good candidates for optimization.
Rendering with overlapping labels: 10.4 s
dataLabels: {
enabled: true,
allowOverlap: true
}
No textOutline: 8.56 s
dataLabels: {
enabled: true,
allowOverlap: true,
shadow: false,
style: {
textOutline: null,
color: 'black'
}
},
The other candidate is about setting zIndex for the data labels, I cannot see how to optimize it without changing internal Highcharts method responsible for drawing data labels. You can wrap drawDataLabels method and remove the part for setting label's zIndex.
Without zIndex: 1.62 s
attr = {
//align: align,
fill: options.backgroundColor,
stroke: options.borderColor,
'stroke-width': options.borderWidth,
r: options.borderRadius || 0,
rotation: rotation,
padding: options.padding
// zIndex: 1 /* commenting this part gives a few good seconds */
};
full example: http://jsfiddle.net/dddqrb9f/1/
I commented only one line in the function but you can remove additional features if you don't need them - e.g. if you don't need labels, you can render text only.
if (!dataLabel) {
dataLabel = point.dataLabel = renderer['text']
Text instead of labels: 0.864 s
example: http://jsfiddle.net/dddqrb9f/2/
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/
I am trying to use "solidgauge" chart from highcharts in backboneJS. Previously I had used a VU meter and it was working correctly. When I used solid gauge I am getting highcharts#17 error. As per this error either I am giving series.type or chart.type wrong else I don't have the necessary extension files. I have loaded the "highcharts.js", "highcharts-more.js", "highcharts-3d.js" and "exporting.js" files and the sibling VU meter worked.So i think there is something wrong with my chart options but can't seem to figure out what that is.Here is my chart configuration and I am giving the data for the series dynamically.I am using coffeescript.
scoreCard :
chart:
type: 'solidgauge'
title: null
pane:
center: ['50%', '85%']
size: '140%'
startAngle: -90
endAngle: 90
background:
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE'
innerRadius: '60%'
outerRadius: '100%'
shape: 'arc'
tooltip:
enabled: false
yAxis:
min: 0
max: 100
stops: [
[10, '#55BF3B']
[60, '#DDDF0D']
[90, '#DF5353']
]
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title:
y: -70
labels:
y: 16
plotOptions:
solidgauge:
dataLabels:
y: 5
borderWidth: 0
useHTML: true
credits:
enabled: false
series: [
{
name: "Pulse value"
}
]
I cant seem to figure out whether the fault is because of the chart configuration or any missing header file. Can anyone please help?
The solidgauge type has its own module that needs to be included, it's not part of the highcharts-more.js file.
As seen in the demo for the solidgauge chart:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
Files and reference:
https://code.highcharts.com/modules/solid-gauge.js
https://code.highcharts.com/
I got the same problem.
I fixed adding the following statements
import * as ChartModuleMore from 'highcharts/highcharts-more.js';
import HCSoldGauge from 'highcharts/modules/solid-gauge';
import Highcharts from 'highcharts'
ChartModuleMore(Highcharts);
HCSoldGauge(Highcharts);
Don't forget to add the files references:
<script src="../node_modules/highcharts/highcharts.js"></script>
<script src="../node_modules/highcharts/highcharts-more.js"></script>
<script src="../node_modules/highcharts/modules/solid-gauge.js"></script>
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);