I'd like to update the red dashed line on this highchart plot using the text box and button below it. I'm stuck on how to get it to work. Right now I'm just trying to get the button press to move the line up slightly just so I can see if it's working.
http://jsfiddle.net/tZ8GM/
This is the function I'm trying to use to update it.
$("#setPtButton").click(function() {
Highcharts.setOptions({
yAxis: {
plotLines: [{
value : 68.1,
color : 'red',
dashStyle : 'longdash',
width : 2
}]
}
});
});
You should be using a combination of addPlotLine and removePlotLine.
$("#setPtButton").click(function() {
var chart = Highcharts.charts[0];
chart.yAxis[0].removePlotLine('setline');
chart.yAxis[0].addPlotLine({
value: $('#setPoint').val(),
color: 'red',
width: 2,
id: 'setline',
dashStyle : 'longdash'
});
});
Updated fiddle.
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
Take a look at this jsfiddle:
http://jsfiddle.net/P8hrN/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
yAxis: [{
lineWidth: 1,
opposite: true
}],
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
I use "opposite: true" to display the y-axis on the right. But I want also the labels (numbers) to be on the right of the axis, not inside the series area.
At the moment, the numbers are on the left, so the series touches the "450" label.
Any ideas?
You need to set align:'left', so anchor-point for label will be on a left side. See demo and docs.
I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.
click: function() {
if (!hasPlotLine) {
chart.xAxis[0].addPlotLine({
value: 5.5,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
} else {
chart.xAxis[0].removePlotLine('plot-line-1');
}
hasPlotLine = !hasPlotLine;
}
Am trying to add and remove the plot lines on click event and I ended up with this eeror "Cannot read property xAxis of undefined"
DEMO
I assume what you would like to remove "old" plotLine and add new in clicked x value. So first of all I recommend to remove conditions, and only use remove/add plotline.
http://jsfiddle.net/FzNqA/8/
click: function () {
var chart = this.series.chart.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: this.x,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}