Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
Highcharts Click to Add Point Chart Example
Keywords : Use highcharts to create chart with clickable point to add markers example, How to draw a lines based on click point in charts using higcharts with example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts - Click to Add Point Chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script type="text/javascript"> $(function () { var chartype = { type: 'scatter', margin: [70, 50, 60, 80], events: { click: function (e) { // find the clicked values and the series var x = e.xAxis[0].value, y = e.yAxis[0].value, series = this.series[0]; // Add it series.addPoint([x, y]); } } } var chartitle = { text: 'User supplied data' } var chartsubtitle = { text: 'Click the plot area to add a point. Click a point to remove it.' } var chartxaxis = { gridLineWidth: 1, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60 } var chartyaxis = { title: { text: 'Value' }, minPadding: 0.2, maxPadding: 0.2, maxZoom: 60, plotLines: [{ value: 0, width: 1, color: '#808080' }] } var chartplotoptions = { series: { lineWidth: 1, point: { events: { 'click': function () { if (this.series.data.length > 1) { this.remove(); } } } } } } var chartlegend = { enabled: false } var chartexporting = { enabled: false } var chartseries = [{ data: [[20, 20], [80, 80]] }] $('#container').highcharts({ chart: chartype, title: chartitle, subtitle:chartsubtitle, xAxis: chartxaxis, yAxis: chartyaxis, plotOptions: chartplotoptions, legend: chartlegend, exporting: chartexporting, series: chartseries }); }); </script> </head> <body> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </body> </html>
Click Here to See Result
Result
Previous
Next