Getting StartedPerformance !!!Chart DataBar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample demonstrates how to specify the chart data points highlighting appearance.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Highlighting Example - HTML5 jQuery Chart Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../../css/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="../../css/jquery.jqRangeSlider.css" /> <link rel="stylesheet" type="text/css" href="../../themes/smoothness/jquery-ui-1.10.4.css" /> <script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../../js/jquery.mousewheel.js" type="text/javascript"></script> <script src="../../js/jquery.jqChart.min.js" type="text/javascript"></script> <script src="../../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script> <!--[if IE]><script lang="javascript" type="text/javascript" src="../../js/excanvas.js"></script><![endif]--> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' }] }; var fillStyle = { type: 'linearGradient', x0: 0, y0: 0, x1: 1, y1: 0, colorStops: [{ offset: 0, color: '#65c2e8' }, { offset: 0.49, color: '#55b3e1' }, { offset: 0.5, color: '#3ba6dc' }, { offset: 1, color: '#2794d4' }] }; $('#jqChart').jqChart({ title: 'Highlighting', legend: { title: 'Legend' }, border: { strokeStyle: '#6ba851' }, background: background, tooltips: { disabled: true, highlighting: true, highlightingFillStyle: 'rgba(0, 204, 0, 0.5)', highlightingStrokeStyle: 'black' }, animation: { duration: 1 }, series: [ { type: 'column', title: 'Column', data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], ['E', 27], ['F', 85], ['D', 43], ['H', 29]], fillStyle: fillStyle }, { type: 'spline', title: 'Spline', data: [['A', 78], ['B', 72], ['C', 86], ['D', 23], ['E', 70], ['F', 60], ['D', 88], ['H', 22]] } ] }); }); </script> </head> <body> <div> <div id="jqChart" style="width: 500px; height: 300px;"> </div> </div> </body> </html> |