I'm using highcharts navigator. I don't need rangeSelector, handles, scrollbar enabled. I've some styling for the navigator.
The problem I'm facing is: When I take my mouse on navigator I see a small expand icon as longs as the mousefocus is in the navigator. Is there any way to disable it?
JSFiddle: http://jsfiddle.net/cbhrp4ao/4/. Taking the mouse pointer inside navigator, the expand width icon can be seen.
HighCharts code:
Highcharts.stockChart('container', {
chart: {
spacingTop: 170,
spacingBottom: 20,
type: 'line'
},
navigator: {
enabled: true,
top: -10,
height: 50,
tickAmount: 12,
maskFill: 'rgba(0, 0, 255, 0.2)',
outlineColor: 'transparent',
handles: {
enabled: false,
backgroundColor: 'transparent',
borderColor: 'transparent'
},
series: {
lineColor: 'transparent',
fillOpacity: 0
},
xAxis: {
labels: {
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
}
}
}
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
You will need to use CSS to overwrite the rule
.highcharts-navigator, .highcharts-navigator * {
cursor : default !important
}
Fiddle
Related
Then again, here I am struggling to work with the plot of pie charts.
When I use useHTML as true it renders exactly as I want (respecting itemWidth too), but when I click in the legend it stops respecting itemWidth and the items overlap. JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
height: 660,
width: 400,
},
title: {
text: 'Example',
},
plotOptions: {
pie: {
center: [200, 50],
size: '150',
innerSize: '75%',
dataLabels: {
enabled: false,
},
showInLegend: true
}
},
legend: {
useHTML:true,
verticalAlign: 'top',
floating: true,
itemWidth: 180,
y: 200,
itemStyle: {
fontSize:'12px',
fontWeight: 'light',
width: 160
}
},
series: [{
type: 'pie',
data: [['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.0516218483578],['bbbbbbbbbbbbbb bbbbbbbbbbbbbbbb ',0.257286564668],['cccccccccccccccccc',1.12221284311],['dddddddd ddddddddd',1.1265250728],['rrrrrrr rrrrrrrrrrr',0.17346294958],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',1.20890386677],['ffffffff ',0.459460369787],['gfdgdfgdfg ',6.13592008543],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.395214054153],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.366061664716],['dddddddddd',0.149098291043],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.0957028394272],['tttttttttttt ',3.48603058953],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',1.6316529146],['fdsfsdfsd .',1.34404210477],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.350541259163],['Aaaaaaaaaaaaa aaaaaaaaaaaaas ',0.45563482302],['gdffdgdgg ',0.601007305701],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',1.07655357912],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.145888955634],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',13.0487584317],['dasdasfsafsaf',1.79394965159],['Vesdfsdrde ',3.41252042196],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.258638673662],],
}]
});
});
How can I keep the formatting even after clicking in the legend?
It seems the bug was solved in the recent releases.
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/
At the top of doughnut charts with only 1 point in the series, there is always a tiny gap between the start and end of the slice:
http://jsfiddle.net/6E2Bx/
credits: {
enabled: false
},
chart: {
plotBackgroundColor: 'pink',
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'See the gap at 0 degrees',
align: 'center',
verticalAlign: 'middle',
y: 0
},
plotOptions: {
pie: {
borderWidth: 0,
dataLabels: {
enabled: true,
distance: -30,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
data: [
['Full', 1]
]
}
Close up of the gap:
Am I missing some setting here?
I would prefer not to modify the drawing/svg elements directly, I feel like borderWidth: 0 should be handling this.
I have enabled the checkbox on the Highcharts Legend. I have also disabled the click of the label to toggle that item in the graph. This makes it so the use should use the checkbox only to toggle graph items. The problem now is that the checkbox is always at the end (far right) of the label. Is there a way to make it appear to the left of the label? If not I'd just like to space out the labels so they aren't right next to each other. When I do that the checkbox stays to the very far right side. This makes it look like it is paired with the next item in the legend. If we can make the checkbox stay just to the right of the label that would be okay too. Here is what I have so far:
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Placed By Advisor'
},
xAxis: {
categories: ['John Jenkins', 'Steve Smith', 'Will Douglas', 'Dustin Johnson', 'Suzy Abbott', 'Wendy Jones'],
min: 0,
max: 4
},
yAxis: {
min: 0
},
legend: {
shadow: true,
itemHoverStyle: {
cursor: "default"
},
itemDistance: 50
//title: {
// text: '<span style="font-size: 10px; color: #666; font-weight: normal">Click to hide</span>',
// style: {
// fontStyle: 'italic'
// }
//},
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
},
series: {
showCheckbox: true,
events: {
checkboxClick: function (event) {
if (event.checked) {
this.show();
this.legendSymbol.show();
} else {
this.hide();
this.legendSymbol.hide();
}
},
legendItemClick: function() {
return false;
}
}
}
},
series: [{
name: 'Unemployed',
color: '#D70014',
selected: true,
data: [100, 100, 120, 55, 35, 189]},
{
name: 'Placed In Related',
color: '#6CBA16',
selected: true,
data: [80, 108, 15, 74, 48, 88]},
{
name: 'Placed In Unrelated',
color: '#FFA501',
selected: true,
data: [17, 22, 187, 70, 75, 35]},
{
name: 'Except',
color: '#2F7DC4',
selected: true,
data: [10, 0, 19, 65, 25, 674]}],
scrollbar: {
enabled:true,
barBackgroundColor: 'lightgray',
//barBorderRadius: 7,
//barBorderWidth: 0,
//buttonBackgroundColor: 'gray',
//buttonBorderWidth: 0,
//buttonArrowColor: 'yellow',
//buttonBorderRadius: 0,
//rifleColor: 'yellow',
//trackBackgroundColor: 'red',
//trackBorderWidth: 1,
//trackBorderColor: 'silver',
//trackBorderRadius: 7
}
});
});
And here is the fiddle.
I am trying to generate combination chart with stacked column and spline.Example of categories that I have are :
'Q4 12', 'Q3 12', 'Q2 12', 'Q1 12', 'Q4 11','Forecast'
So it will have 6 bars, but I want 'Q4 11' and 'Forecast' 'touching',I mean close to each other.This is because 'Forecast' is related to 'Q4 11' category.I already read demo on Stacked and Group column but still don't have idea to make only certain bar close to each other.
Here is my code, you also can view it in JSFiddle also.Thanks for reading this.
$(function () {
$('#container').highcharts({
tooltip: { enabled: false },
chart: {
},
title: {
text: 'Desktop'
},
xAxis: {
categories: ['Q4 12', 'Q3 12', 'Q2 12', 'Q1 12', 'Q4 11','Forecast']
},
yAxis:[ {
min: 0,
title: {
text: 'TAM'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
{ // Secondary yAxis
title: {
text: 'Share',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
min:0,max:100
}
],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'HDD',
type:'column',
data: [0, 30, 40, 70, 20,30],
stack:'old'
},
{
name: 'SSHD',
type:'column',
data: [20, 20, 30, 20, 10,0],
stack:'old'
},
{
name: 'SSD',
type:'column',
data: [30, 40, 40, 20, 50,10],
stack:'old'
},
{
name: 'Share',
type: 'spline',
data: [10, 20, 40, 90,70],
}
]
});
});
You can use different series, linked to the main one. In that case you will be able to set different options for that one specific bar, see: http://jsfiddle.net/tQeF7/28/
Now you can play around with pointPadding and groupPadding like in aboce example. Or you can use pointPlacement, like this: http://jsfiddle.net/tQeF7/29/
Note, with the second solution, it moves only point, not the full category. In Highcharts terms categories always are taking full space and divide in evenly between each.