I have 2 plotlines in highchart. When I select (for zoom & reset) some range before and after the plotline area some cases having plotlines even it's not in the selected range. So decided to remove the plotlines after validating the selected range and plotline dates . When I tried to set it back after the reset button click . It's not working.
Removing:
selection(event) {
if((fDate < mCurrentDate && tDate < mCurrentDate)||(fDate > mCurrentDate && tDate > mCurrentDate)){
this.xAxis[0].removePlotLine('mCurrentDate');
}
if((pDate < mCurrentDate && pDate < mCurrentDate)||(pDate > mCurrentDate && pDate > mCurrentDate)){
this.xAxis[0].removePlotLine('mSaleDate');
}
}
When the reset Button is clicked I want to set the plotlines again .
render() {
id:'mCurrentDate',
value: currentDate.getTime(),
color: 'pink',
width: 4,
zIndex: 3},
{
id:'mSaleDate',
value: SaleStartedDate,
color: 'Green',
width: 4,
zIndex: 6})
So the thing is when we do a zoom I need to remove the plotlines if the plotline dates are not in the selected range and when user clicks on the reset zoom button I want to set the plotlines back.
can anyone help me to fix it.
Use update option to recreate the plot line
Here i use the merge of lodash to merge current option and add your plotlines:
merge(options, {
xAxis: {
plotLines: [
{
id:'mCurrentDate',
value: currentDate.getTime(),
color: 'pink',
width: 4,
zIndex: 3
},{
id:'mSaleDate',
value: SaleStartedDate,
color: 'Green',
width: 4,
zIndex: 6
}
]
}
});
this.chart.update(options, true);
Update : you don't absolutely need to get all your opions when you call update. You just need to pass an object with the changed options
Related
I have two highcharts on one page one of the charts can add and remove a second or thrid yAxis dynamicly. When this is done of course the width of the xAxis is shorter than the one with only one yAxis.
Now i want to sync the width of the xAxis to keep both charts underneath each other.
When I try the set xAxis width the width is changed but the chartarea is sticking to the left and not to the right.
How can I get draw both chart-areas with the same dimensions?
Here is a fiddle with a small example: Fiddle Fiddle
Best
MrLight
You can use top, width and offset properties to size and position axes. First two of these are not documented but they work.
Live demo: http://jsfiddle.net/BlackLabel/cvey8ap8/
xAxis: {
categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'],
width: '90%',
left: '8%',
// Categories for the charts
},
yAxis: [{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple Consumption' // Title for the yAxis
},
left: '7%',
offset: 0
},
{
min: 0, // Lowest value to show on the yAxis
title: {
text: 'Apple12 Consumption' // Title for the yAxis
},
offset: 0
}
],
When data labels overlap in Highcharts, only one data label is displayed. This seems to be handled randomly. See fiddle:
http://jsfiddle.net/lamarant/rmxLd1d4/
$(function () {
$('#container').highcharts({
title: {
text: 'Label Test'
},
series: [{
type: 'line',
data: [ 10, 10, 10, 10, 10, 10, 50],
dataLabels: {
enabled: true,
color: 'blue',
zIndex: 10
},
zIndex: 10
},
{
type: 'line',
data: [ 11, 11, 11, 11, 11, 11, 49],
dataLabels: {
enabled: true,
color: 'red',
zIndex: 10
},
zIndex: 20
}]
});
});
Notice that the first data label displayed in the chart is from the second series while the rest are from the first series.
I tried setting the priority of the label display using zIndex in both series and series.dataLabel with no luck.
Is there any way to set it so that a designated series always takes priority when Highcharts determines which label to display?
One possible fix is supplying a labelrank for each point, which is used to evaluate their sorting order. If you supply this rank for each point in a series, that series should be considered "above" series without such a rank (or with a lower rank integer value).
In code, manually for each point:
series: [{
data: [
{ y: 11, labelrank: 1 },
{ y:11, labelrank: 1 }
// ...
],
// ...
}]
In code, using the callback function (JSFiddle):
$('#container').highcharts({
// Options ...
}, function() {
var mySeriesIndex = 1;
// For each point in the preferred series
for(i = 0; i < this.series[mySeriesIndex].points.length; i++)
// Set a labelrank
this.series[mySeriesIndex].points[i].labelrank = 1;
});
My current take on the issue itself is this:
With the current implementation of the overlap logic it seems to me that this is a bit of an unintended behavior. The source code uses Array.sort in a way that shifts the positions of the point labels, since Array.sort is not guaranteed to be stable (same-value items wont retain their original order).
If you check your example in Firefox it should work as intended (their implementation of Array.sort is different), while in Chrome it doesn't (not stable). You could hope that this little feature is fixed.
I have a couple of formatting questions, as you'll see I'm running a very small chart 225*150...
How do I remove the x-axis labels? I still want the information in the tooltip, just not along the axis. I've tried...
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
...but it still shows "0, .5, 1, 1.5 etc..."
I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?
Last one, how do I set zero for the y-axis scale?
Here's a fiddle!
Thanks!
UPDATE: Added suggestions to original fiddle.
In this block:
xAxis: {
title:{
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled:false
}
},
You have
1) the categories property listed inside the title attribute, and
2) you have enabled: false set for the title attribute
categories is a property of the axis directly, and the enabled: false should be applied to the labels, not the title.
"I've adjusted the thickness of my lines but now the datapoint indicators themselves can't bee seen. Can somebody show me which value controls that?"
Primarily the marker radius property:
http://api.highcharts.com/highcharts#plotOptions.series.marker.radius
You can also look at the lineWidth property of the marker.
"Last one, how do I set zero for the y-axis scale?"
axis min property:
http://api.highcharts.com/highcharts#yAxis.min
updated fiddle: http://jsfiddle.net/jlbriggs/z6ZLt/8/
To disable the xAxis.labels you set enabled to false:
xAxis: {
categories: ['2008-2009', '2009-2010', '2010-2011', '2011-2012'],
enabled: false,
labels: {
enabled: false
}
}
For doing "set zero for the y-axis scale" you set the yAxis.min value to 0:
yAxis: {
min: 0,
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}
To handle the size of the line + markers you need to modify their properties in :
plotOptions: {
series: {
marker: {
radius: 1.5
},
pointWidth: 1
}
}
I am trying to show more labels on yAxis, but I couldn't get it to work. My yAxis properties are as follows:
yAxis : {
title : {
text : '%CPU Utilization'
},
labels: {
enabled: true,
step: 5,
zIndex: 10
},
showLastLabel: true,
min:0,
max: 100,
plotLines : [{
value : 70,
color : '#FF3300',
dashStyle : 'shortdash',
width : 2,
label : {
text : 'Threshold',
align: 'right',
style: {
fontWeight: 'bold'
}
}
}]
},
I followed the documentation but does not seem to be working. I need a label at 0, 10, 20, 30, 40 (in 10 increments). Any idea whether this is doable in highcharts?
what you want to look at is the tickInterval property:
http://api.highcharts.com/highcharts#yAxis.tickInterval
If you need irregular intervals, you can instead use the tickPositions property:
http://api.highcharts.com/highcharts#yAxis.tickPositions
Or, if you need something even more complex, the tickPositioner function:
http://api.highcharts.com/highcharts#yAxis.tickPositioner
{{Edit:
remove the step property from your labels though - the step property tells the chart how many labels to skip when it draws them, not where to draw them.
Simply put I am looking for a way to set two or more plotLines in highcharts/highstocks. The API doccuments do a good job of showing how to set one although I am not sure if there is a way to set two of them.
Yes it is possible, just declare multiple plotLine configurations in the array:
plotLines: [{
color: '#FF0000',
width: 2,
value: 4.5
}, {
color: '#00FF00',
width: 2,
value: 5.5
}]
Example on jsfiddle
Is there a method where i can supply an array of points to value ? Instead of new tags
{
color: '#00FF00',
width: 2,
value: 5.5
}
for each point .