Hover

You can customize the style and behavior of a chart when hovering over the different aspects of it. In the workbook below, try selecting the chart and editing some of the fields, which correspond to JavaScript properties that can be set as a separate style and applied via the hoverStyle SpreadJS chart property. Once the properties are changed, click the Set button and hover over different elements of the spreadsheet's chart to see the new style.

Hover Style: SpreadJS supports the following hover style customizations: the color and transparency Border: color, transparency, width, dash style Symbol: color, transparency Symbol Border: color, transparency, width, dash style You can customize the hover style using the following code: Hover Animation: Hover animation can help to improve the user experience when interacting with the chart. You can use the useAnimation() API to set whether or not to apply animation to the chart.
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); initEvent(spread); //readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList()); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158], ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192], ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); var chart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 494, 0, 480, 270, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns); chart.title({text: "HoverStyle with markers"}); var seriesItem = chart.series().get(0); seriesItem.symbol.size = 20; chart.series().set(0, seriesItem); var hoverStyle = { color: "orange", transparency: 0.1, borderStyle: { transparency: 0.1, color: '#FF0000', width: 3, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash }, symbolStyle: { color: "yellow", transparency: 0.1, borderStyle: { transparency: 0.1, color: 'rgb(0, 0, 255)', width: 9, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash } } }; chart.hoverStyle(hoverStyle); var chart2 = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 494, 275, "A1:D5", GC.Spread.Sheets.Charts.RowCol.columns); chart2.title({text: "Default HoverStyle"}); var chart3 = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.pie, 494, 270, 480, 270, 'A1:H2'); chart3.title({text: "HoverStyle with Animation"}); chart3.useAnimation(true); var hoverStyle3 = { color: "orange", transparency: 0.6, borderStyle: { transparency: 0.1, color: '#FF0000', width: 9, dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash } }; chart3.hoverStyle(hoverStyle3); sheet.resumePaint(); }; function initEvent(spread) { spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (chart) { readSetting(chart); } }); _getElementById("apply").addEventListener('click', function () { applySetting(); }); }; function readSetting(chart) { _getElementById("useAnimation").checked = chart.useAnimation(); var hoverStyle = chart.hoverStyle(); if (!hoverStyle) { return; } _getElementById("color").value = hoverStyle.color || ""; _getElementById("transparency").value = hoverStyle.transparency; _getElementById("border-color").value = hoverStyle.borderStyle.color || ""; _getElementById("border-width").value = hoverStyle.borderStyle.width || 0; _getElementById("border-transparency").value = hoverStyle.borderStyle.transparency; _getElementById("border-dashStyle").value = hoverStyle.borderStyle.dashStyle; _getElementById("symbol-color").value = hoverStyle.symbolStyle.color || ""; _getElementById("symbol-transparency").value = hoverStyle.symbolStyle.transparency; _getElementById("symbol-border-color").value = hoverStyle.symbolStyle.borderStyle.color || ""; _getElementById("symbol-border-width").value = hoverStyle.symbolStyle.borderStyle.width || 0; _getElementById("symbol-border-transparency").value = hoverStyle.symbolStyle.borderStyle.transparency; _getElementById("symbol-border-dashStyle").value = hoverStyle.symbolStyle.borderStyle.dashStyle; } function applySetting() { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (!chart) { return; } chart.useAnimation( _geBoolean("useAnimation")); var hoverStyle = { color: _getText("color"), transparency: _getFloat("transparency"), borderStyle:{ color: _getText("border-color"), width: _getValue("border-width"), transparency: _getFloat("border-transparency"), dashStyle: _getValue("border-dashStyle"), }, symbolStyle:{ color: _getText("symbol-color"), transparency: _getFloat("symbol-transparency"), borderStyle:{ color: _getText("symbol-border-color"), width: _getValue("symbol-border-width"), transparency: _getFloat("symbol-border-transparency"), dashStyle: _getValue("symbol-border-dashStyle"), } } } chart.hoverStyle(hoverStyle); } function getActiveChart(sheet) { var activeChart = null; sheet.charts.all().forEach(function (chart) { if (chart.isSelected()) { activeChart = chart; } }); return activeChart; } function _getElementById(id) { return document.getElementById(id); } function _geBoolean(id) { return _getElementById(id).checked; } function _getFloat(id) { return parseFloat(_getElementById(id).value); } function _getValue(id) { return parseInt(_getElementById(id).value); } function _getText(id) { return _getElementById(id).value; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <div class="option-row"> <label for="useAnimation">useAnimation</label> <input type="checkbox" id="useAnimation" checked /> </div> <div class="option-row" id=""> <label for="color">Color:</label> <input type="text" id="color" value="#FF0000" /> </div> <div class="option-row" id=""> <label for="transparency">Transparency:</label> <input type="number" id="transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="border-color">Border Color:</label> <input type="text" id="border-color" value="#00FF00" /> </div> <div class="option-row" id=""> <label for="border-width">Border Width:</label> <input type="number" id="border-width" step="1" min="0" max="100" value="1" /> </div> <div class="option-row" id=""> <label for="border-transparency">Border Transparency:</label> <input type="number" id="border-transparency" step="0.1" min="0" max="1" value="1" /> </div> <div class="option-row" id=""> <label for="border-dashStyle">Border DashStyle:</label> <select id="border-dashStyle"> <option value="0" selected="selected">solid</option> <option value="1">dot</option> <option value="2">dash</option> <option value="3">lgDash</option> <option value="4">dashDot</option> <option value="5">lgDashDot</option> <option value="6">lgDashDotDot</option> <option value="7">sysDash</option> <option value="8">sysDot</option> <option value="9">sysDashDot</option> <option value="10">sysDashDotDot</option> </select> </div> <hr> <div class="option-row" id=""> <label for="symbol-color">Symbol Color:</label> <input type="text" id="symbol-color" value="orange" /> </div> <div class="option-row" id=""> <label for="symbol-transparency">Symbol Transparency:</label> <input type="number" id="symbol-transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="symbol-border-color">Symbol Border Color:</label> <input type="text" id="symbol-border-color" value="rgb(255,0,255)" /> </div> <div class="option-row" id=""> <label for="symbol-border-width">Symbol Border Width:</label> <input type="number" id="symbol-border-width" step="1" min="0" max="100" value="1" /> </div> <div class="option-row" id=""> <label for="symbol-border-transparency">Symbol Border Transparency:</label> <input type="number" id="symbol-border-transparency" step="0.1" min="0" max="1" value="0.7" /> </div> <div class="option-row" id=""> <label for="symbol-border-dashStyle">Symbol Border DashStyle:</label> <select id="symbol-border-dashStyle"> <option value="0" selected="selected">solid</option> <option value="1">dot</option> <option value="2">dash</option> <option value="3">lgDash</option> <option value="4">dashDot</option> <option value="5">lgDashDot</option> <option value="6">lgDashDotDot</option> <option value="7">sysDash</option> <option value="8">sysDot</option> <option value="9">sysDashDot</option> <option value="10">sysDashDotDot</option> </select> </div> <div class="option-row"> <input type="button" id="apply" value="Set" /> </div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; } .option-row { padding-bottom: 5px; } label { display:inline-block; } input{ padding: 1px 8px; box-sizing: border-box; width: 100%; } select{ width: 100%; } input[type=checkbox] { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }