I created a line chart, and added a button whose click method make the line thicker (lineWidth 7pt). However, each time I mouse over the line or the legend, the line restore to its original width (which I believe is 2 pt). So I added the following plot options to disable the "hover" function:
line: {
states: {
hover: {
enabled: false,
}
}
},
But it only resolves the issue partially -- after I set lineWidth to 7 pt using the button, the line width will still be reset to its original 2 pt after I mouse over the legend or move mouse across the plotting area.
I have shared my example here. Can anyone help me figure out how to prevent resetting the line width after changing its width to 7 pt?
Thanks in advance!
Alex.
You can use
series.update({
lineWidth:10
});
http://jsfiddle.net/QNPYP/2/
http://api.highcharts.com/highcharts#Series.update()
Related
I am using Highcharts for one of my project. Everything is okay except I could not change line style('Solid','ShortDash','ShortDot','ShortDashDot','ShortDashDotDot','Dot','Dash','LongDash','DashDot','LongDashDot','LongDashDotDot') of bottom grid line in x axis as shown in the attached image.
Because the line you highlighted is not a gridLine of yAxis and dash style does not apply to it. In fact it covers the bottom-most grid line. Disable it by setting its width to 0.
API Reference:
http://api.highcharts.com/highcharts/xAxis.lineWidth
http://api.highcharts.com/highcharts/yAxis.gridLineDashStyle
Example:
http://jsfiddle.net/mnp6xa57/
I'm having some trouble with highstock. I've figured out how to shuffle around other series via the y axis object, however I'm looking to dynamically add more series, and shift the navigator down after I add additional series, along with increasing the height of the containing div as more series are added.
My current approach to moving the navigator is to update the top property of the y axis assigned to the navigator, as informed by this answer:
Move the Highstock navigator position
function moveNavigator(){
chart.navigator.yAxis.update({
height : 50,
top: 202
});
}
http://jsfiddle.net/dwhcj3e7/2/
If my understanding were correct this fiddle should move the navigator from on top of the chart to the bottom of the chart. Is there a way to accomplish this behavior without completely making a new chart object?
Use chart.update() method (available from version 5) and update navigator's top property.
chart.update({
navigator: {
top: 202,
height: 50
}
});
example: http://jsfiddle.net/dwhcj3e7/3/
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
I have an issue with a HighCharts pie I've created. Sometimes the tooltip text overlaps with the legend, so I had to increase the legend's y property. However, this is causing parts of the legend (it's horizontal with 4 rows) to become partially hidden. I've tried adjusting the height property of the container, as well as a bunch of other properties, but the problem never goes away...
Here's how it looks like:
http://imgur.com/YOPjoXG
Any help is much appreciated.
If you are fine with pagination in legend then fix the height of the legend with maxHeight.
if the legend overflows, then pagination appears automatically.
legend: {
maxHeight: 30,
}
here is a working fiddle for pagination http://jsfiddle.net/cEcRz/
hope this is what you are looking for.
You can use pagination but in exporting add custom options to the legend like here:
http://jsfiddle.net/cEcRz/1/
exporting:{
chartOptions:{
legend:{
layout: 'horizontal'
}
}
},
Obviosuly you need to adapt other parameters like size etc.
I am using Highstock charts with single series having flags on it where x-axis is 'datetime' type and y-axis is any numerical value. Now initially when chart loads I provide bit of padding on x-axis using attribute "max" so that end point doesn't touch the edge (which is working fine) but as I drag the navigator, the padding gets lost and the point touches the edge.
Is there any way of maintaining that padding on graph line even after I drag the navigator?
Any help would be greatly appreciated...
Unfortnately maxPadding works only for first time, as you ddescribed, but you can catch adterSetExtremes and then (setExtremes](http://api.highcharts.com/highstock#xAxis.events.setExtremes) to modify range on chart.
Thanks a lot Sebastian Bochan.....It worked for me!!!!. Just in case if anyone needs it. Here is what I have done
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
Padding_value is a variable proving padding every time navigator is triggered