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 Spline with Symbols Chart Example
Keywords : Spline chart with symbols using highcharts, How to show symbols in spline chart using highcharts
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Highcharts Spline with symbols 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: 'spline' } var chartitle = { text: 'Monthly Average Temperature' } var chartsubtitle = { text: 'Source: WorldClimate.com' } var chartxaxis = { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] } var chartyaxis = { title: { text: 'Temperature' }, labels: { formatter: function () { return this.value + '°'; } } } var chartooltip = { crosshairs: true, shared: true } var chartplotoptions = { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } } var chartseries = [{ name: 'Tokyo', marker: { symbol: 'square' }, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' } }, 23.3, 18.3, 13.9, 9.6] }, { name: 'London', marker: { symbol: 'diamond' }, data: [{ y: 3.9, marker: { symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)' } }, 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, tooltip:chartooltip, plotOptions: chartplotoptions, 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