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'
});
}
Related
Code is as below
chart: {
type: "funnel",
marginBottom: 25,
backgroundColor: "transparent",
events: {
load: function() {
var chart = this;
Highcharts.each(chart.series[0].data, function(p, i) {
chart.options.labels.items.push({
html: "less confident" + i,
style: { left: 550, top: 50 }
});
p.dataLabel.attr({
x: (chart.plotWidth - chart.plotLeft) / 2,
"text-anchor": "middle"
});
});
}
}
},
I see that you're trying to add a label for every point. Highcharts has build in functionality for this called data labels: https://api.highcharts.com/highcharts/series.line.dataLabels
Another approach is to use SVGRenderer.label: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
I have implemented a plot line that's showing an average of all values:
"yAxis": {
plotLines: [{
color: 'red',
value: 22,
width: '1',
label: {
text: 'Average: 22'
}
}]
},
I want to change the average-value on legendItemClick. Is it possible to change some plotLine-properties programatically?
What I tried so far is this:
plotOptions: {
series: {
events: {
legendItemClick: function (event) {
var average = 15;
event.target.chart.userOptions.yAxis.plotLines[0].value = average;
event.target.chart.userOptions.yAxis.plotLines[0].label.text = 'Average: ' + average;
}
},
}
},
The value and the label-text aren't changing in the chart. Also I tried to redraw the chart but it still isn't changing the plot line. Is there a way to accomplish this?
I now have found an acceptable answer to my own question:
var average = 15;
event.target.chart.yAxis[0].removePlotLine('average');
event.target.chart.yAxis[0].addPlotLine({
id: 'average',
color: 'red',
width: 1,
value: average,
zIndex: 200,
label: {
text: 'Average: ' + average
}
});
I have to specify an ID for the plotLine, destroy it and create a new one.
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.
Is it possible to plot a line on click event of the chart?
Chart Click Event
chart: {
events: {
click: function(event) {
alert ('x: '+ event.xAxis[0].value +', y: '+
event.chartY );
var chart = event.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.chartX,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}
}
},
I had initially done the same on the plotoptions click event of highcharts. Now, doing the same using chart click event? but not able to get the series xaxis object.
Worked! Had to read the highcharts document... :-)
Working LINK
chart: {
events: {
click: function (event) {
var chart = this.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.xAxis[0].value,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}
}
I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.
any idea how to Redraw the map on click on a button.
I did the similar thing on my project.
You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.
Here's the full code.
function callback($this) {
var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
img.add();
img.css({
'cursor': 'pointer'
});
img.attr({
'title': 'Pop out chart'
});
img.on('click', function () {
var params = {
chart: {
spacingLeft: 100,
spacingRight: 100,
renderTo: 'myChart'
},
title: {
text: 'title'
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
}
new Highcharts.Chart(params, function (chart) {});
})
}
new Highcharts.Chart(charts.params, callback);
// where charts.params is object which contains options for chart