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 Data Labels Chart Example
Keywords : How to add data labels to charts using highcharts with example, Charts with data labels using highcharts with example
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts With data labels chart</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script type="text/javascript"> $(function () { var chartype={ type: 'line' } var chartitle= { text: 'Monthly Average Temperature', x: -20 //center } var chartsubtitle = { text: 'Source: WorldClimate.com', x: -20 } var chartxaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } var chartyaxis = { title: { text: 'Temperature (°C)' } } var charplotoptions = { line: { dataLabels: { enabled: true }, enableMouseTracking: false } } var chartseries = [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] $('#container').highcharts({ chart:chartype, title: chartitle, subtitle: chartsubtitle, xAxis:chartxaxis, yAxis: chartyaxis, plotOptions: charplotoptions, 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