Geek Answers Handbook

Highcharts highlight one point on a line

I use Highcharts to draw a line chart. When the page loads, a line graph is displayed. Note that I got the y value for each x-value, starting from 0 to 700 (0,1,2,3, ..., 700). This is how I create the chart:

chart = new Highcharts.Chart({ chart: { renderTo: 'container', animation: false, type: 'line', marginTop: null, marginRight: 55, marginBottom: 50, marginLeft: 80, backgroundColor: backgroundColor, spacingTop: 10, spacingRight: 10, spacingBottom: 15, spacingLeft: 10, }, title: { text: ' Graph', style: {color: graphLabelColor}, x: -20 //center }, xAxis: { title: { text: 'xAXIS', style: { color: axisLabelColor }, }, min:0, max: 600, gridLineColor: gridLineColor, minorTickInterval: 50, minorTickLength: 1, tickInterval: 100, minorGridLineWidth: 0, gridLineWidth: 1, lineColor: axisColor, labels: { style : { color: axisColor } }, plotLines: [{ value: 0, width: 0, color: axisColor }] }, yAxis: { title: { text: 'yAxis', style: {color: axisLabelColor }, }, min:0, max: 700, gridLineColor: gridLineColor, lineColor: axisColor, minorTickInterval: 50, minorTickLength: 1, minorGridLineWidth: 0, tickInterval: 100, labels: { style: { color: axisColor } }, plotLines: [{ value: 0, width: 0, color: axisColor }] }, exporting: { enabled: false }, tooltip: { enabled: true, borderColor: crosshairColor, crosshairs: [{ width: 1, color: crosshairColor, }, { width: 1, color: crosshairColor, }], formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0); } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 1, borderColor: plotlineColor, enabled: false, floating: true, shadow: true }, plotOptions: { series: { enableMouseTracking: true }, line: { color:plotlineColor, }, }, series: [{ lineWidth: 2, name: carname, data: dataArray, marker: { color:crosshairColor, radius: 1 } }] });

In my HTML page, I have two buttons to increase / decrease (+ 1 / -1) the number in the text box, starting at 200. The number is the x-coordinate on the graph. I would like to highlight the displayed number of my text box on the graph with a different color and a larger dot when the graph is loaded for the first time, and also when the user changes the number using one of these buttons. How can i do this?

I tried

  chart.series[0].options.data[valueOfTextfield].color = 'yellow'; chart.redraw(true);

in the onclick method of buttons, but it does not work.

Thank you for your responses!

+7
source share
2 answers

use the point feature selection method http://api.highcharts.com/highcharts#series .point.events.select

+5
source

Using marker , we can do this:

 $(function () { $('#container').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, { marker: { fillColor: '#FF0000', lineWidth: 3, lineColor: "#FF0000" // inherit from series },y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); });

http://jsfiddle.net/zR4Kn/

+7
source

More articles:


All Articles