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.
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { SpreadSheetsModule } from '@mescius/spread-sheets-angular';
import GC from '@mescius/spread-sheets';
import "@mescius/spread-sheets-shapes";
import '@mescius/spread-sheets-charts';
import './styles.css';
@Component({
selector: 'app-component',
templateUrl: 'src/app.component.html'
})
export class AppComponent {
useAnimation = true;
color = "#FF0000";
transparency = 0.7;
borderColor = "#00FF00";
borderWidth = 1;
borderTransparency = 1;
borderDashStyle = "0";
symbolColor = "orange";
symbolTransparency = 0.7;
symbolBorderColor = "rgb(255,0,255)";
symbolBorderWidth = 1;
symbolBorderTransparency = 0.7;
symbolBorderDashStyle = "0";
spread: GC.Spread.Sheets.Workbook;
hostStyle = {
width: 'calc(100% - 280px)',
height: '100%',
overflow: 'hidden',
float: 'left'
};
initSpread($event: any) {
this.spread = $event.spread;
let spread = this.spread;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let 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);
let 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"
});
let seriesItem = chart.series().get(0);
seriesItem.symbol.size = 20;
chart.series().set(0, seriesItem);
let 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);
let 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"
});
let 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);
let hoverStyle3 = {
color: "orange",
transparency: 0.6,
borderStyle: {
transparency: 0.1,
color: '#FF0000',
width: 9,
dashStyle: GC.Spread.Sheets.Charts.LineType.lgDash
}
};
chart3.hoverStyle(hoverStyle3);
this.initEvent();
this.readSetting(chart);
sheet.resumePaint();
}
initEvent() {
let self = this;
self.spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function() {
let sheet = self.spread.getActiveSheet();
let chart = self.getActiveChart(sheet);
if (chart) {
self.readSetting(chart);
}
});
}
readSetting(chart: GC.Spread.Sheets.Charts.Chart) {
let useAnimation = chart.useAnimation();
let hoverStyle = chart.hoverStyle();
if (!hoverStyle) {
return;
}
this.useAnimation = useAnimation;
this.color = hoverStyle.color;
this.transparency = hoverStyle.transparency;
this.borderColor = hoverStyle.borderStyle.color;
this.borderWidth = hoverStyle.borderStyle.width;
this.borderTransparency = hoverStyle.borderStyle.transparency;
this.borderDashStyle = hoverStyle.borderStyle.dashStyle;
this.symbolColor = hoverStyle.symbolStyle.color;
this.symbolTransparency = hoverStyle.symbolStyle.transparency;
this.symbolBorderColor = hoverStyle.symbolStyle.borderStyle.color;
this.symbolBorderWidth = hoverStyle.symbolStyle.borderStyle.width;
this.symbolBorderTransparency = hoverStyle.symbolStyle.borderStyle.transparency;
this.symbolBorderDashStyle = hoverStyle.symbolStyle.borderStyle.dashStyle;
}
applySetting() {
let sheet = this.spread.getActiveSheet();
let chart = this.getActiveChart(sheet);
if (!chart) {
return;
}
chart.useAnimation(this.useAnimation);
let hoverStyle = {
color: this.color,
transparency: parseFloat(<any>this.transparency),
borderStyle: {
color: this.borderColor,
width: parseInt(<any>this.borderWidth),
transparency: parseFloat(<any>this.borderTransparency),
dashStyle: parseInt(this.borderDashStyle),
},
symbolStyle: {
color: this.symbolColor,
transparency: parseFloat(<any>this.symbolTransparency),
borderStyle: {
color: this.symbolBorderColor,
width: parseInt(<any>this.symbolBorderWidth),
transparency: parseFloat(<any>this.symbolBorderTransparency),
dashStyle: parseInt(this.symbolBorderDashStyle),
}
}
}
chart.hoverStyle(hoverStyle);
}
getActiveChart(sheet: GC.Spread.Sheets.Worksheet): GC.Spread.Sheets.Charts.Chart | null {
let activeChart = null;
sheet.charts.all().forEach(function(chart: GC.Spread.Sheets.Charts.Chart) {
if (chart.isSelected()) {
activeChart = chart;
}
});
return activeChart;
}
}
@NgModule({
imports: [BrowserModule, SpreadSheetsModule, FormsModule],
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
enableProdMode();
// Bootstrap application with hash style navigation and global services.
platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- Polyfills -->
<script src="$DEMOROOT$/en/angular/node_modules/core-js/client/shim.min.js"></script>
<script src="$DEMOROOT$/en/angular/node_modules/zone.js/fesm2015/zone.min.js"></script>
<!-- SystemJS -->
<script src="$DEMOROOT$/en/angular/node_modules/systemjs/dist/system.js"></script>
<script src="systemjs.config.js"></script>
<script>
// workaround to load 'rxjs/operators' from the rxjs bundle
System.import('rxjs').then(function (m) {
System.import('@angular/compiler');
System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators));
System.import('$DEMOROOT$/en/lib/angular/license.ts');
System.import('./src/app.component');
});
</script>
</head>
<body>
<app-component></app-component>
</body>
</html>
<div class="sample-tutorial">
<gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)">
<gc-worksheet></gc-worksheet>
<gc-worksheet></gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<label for="useAnimation">useAnimation</label>
<input type="checkbox" id="useAnimation" [(ngModel)]="useAnimation" />
</div>
<div class="option-row" id="">
<label for="color">Color:</label>
<input type="text" id="color" [(ngModel)]="color" />
</div>
<div class="option-row" id="">
<label for="transparency">Transparency:</label>
<input type="number" id="transparency" step="0.1" min="0" max="1" [(ngModel)]="transparency" />
</div>
<div class="option-row" id="">
<label for="border-color">Border Color:</label>
<input type="text" id="border-color" [(ngModel)]="borderColor" />
</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" [(ngModel)]="borderWidth" />
</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" [(ngModel)]="borderTransparency" />
</div>
<div class="option-row" id="">
<label for="border-dashStyle">Border DashStyle:</label>
<select id="border-dashStyle" [(ngModel)]="borderDashStyle">
<option value="0">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" [(ngModel)]="symbolColor" />
</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" [(ngModel)]="symbolTransparency" />
</div>
<div class="option-row" id="">
<label for="symbol-border-color">Symbol Border Color:</label>
<input type="text" id="symbol-border-color" [(ngModel)]="symbolBorderColor" />
</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" [(ngModel)]="symbolBorderWidth" />
</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" [(ngModel)]="symbolBorderTransparency" />
</div>
<div class="option-row" id="">
<label for="symbol-border-dashStyle">Symbol Border DashStyle:</label>
<select id="symbol-border-dashStyle" [(ngModel)]="symbolBorderDashStyle">
<option value="0">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" (click)="applySetting()" />
</div>
</div>
</div>
.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;
}
(function (global) {
System.config({
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
},
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'core-js': 'npm:core-js/client/shim.min.js',
'zone': 'npm:zone.js/fesm2015/zone.min.js',
'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js',
'@angular/core': 'npm:@angular/core/fesm2022',
'@angular/common': 'npm:@angular/common/fesm2022/common.mjs',
'@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs',
'@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs',
'@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs',
'@angular/router': 'npm:@angular/router/fesm2022/router.mjs',
'@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs',
'jszip': 'npm:jszip/dist/jszip.min.js',
'typescript': 'npm:typescript/lib/typescript.js',
'ts': './plugin.js',
'tslib':'npm:tslib/tslib.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
"node_modules/@angular": {
defaultExtension: 'mjs'
},
"@mescius/spread-sheets-angular": {
defaultExtension: 'mjs'
},
'@angular/core': {
defaultExtension: 'mjs',
main: 'core.mjs'
}
}
});
})(this);
