ChartJS
Examples
Embed charts on your data grid
Integrating charts in your online spreadsheets. See this example implemented using React Data Grid.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<div id="spreadsheet"></div>
<script>
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
csv: '/jspreadsheet/sales.csv',
csvHeaders: false,
columns: [
{ width:'150px' },
],
defaultColWidth: '50px',
mergeCells: {
B1: [3, 1],
E1: [10, 1]
},
rows: {
0: { height:'300px' }
},
style: {
'A1': 4,
'N3': 3,
'A3:M3': 0,
'A4:M6': 1,
'N4:N6': 4,
}
}],
style: [
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em',
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em;background-color: #e0eaff',
'border-bottom:1px solid black;font-size:0.8em',
'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff',
'background-color: #e0eaff',
],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "@jspreadsheet/formula-charts";
// Set the license
const license = 'NWY0MDI2Mzg4ZDRiMjVhNTBjNjI2NjI0YTJiNDQzMTk2M2M0MjViNWYzNTVhN2ExYjI2MzNhZDg5ZmU0ZDVlYzQ3ZjcyMDM2NzgzOWY2NWFiN2M3MGRjNjlmYWJmZGU5NDNlN2E3Y2VlNjM5ZjNkMWE4YjlmYzNkM2JiNzJkOTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qa3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Create the react data grid
export default function App() {
const spreadsheet = useRef();
// Global style definitions
const gridStyle = [
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em',
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em;background-color: #e0eaff',
'border-bottom:1px solid black;font-size:0.8em',
'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff',
'background-color: #e0eaff',
];
// Columns
const columns = [
{ width:'150px' },
];
// Style with ranges and the position of the style string in the globalStyle array
const style = {
'A1': 4,
'N3': 3,
'A3:M3': 0,
'A4:M6': 1,
'N4:N6': 4,
};
// Merged cells
const mergeCells = { B1: [3, 1], E1: [10, 1] };
// Rows
const rows = { 0: height: '300px' };
// Render data grid component
return (
<Spreadsheet ref={spreadsheet} license={license} style={gridStyle}>
<Worksheet csv={"/jspreadsheet/sales.csv"}
columns={columns}
csvHeaders={"false"}
defaultColWidth={"50px"}
mergeCells={mergeCells}
style={style}
rows={rows}
/>
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" :style="gridStyle">
<Worksheet
csv="./sales.csv"
:columns="columns"
:csvHeaders="false"
defaultColWidth="50px"
:mergeCells="mergeCells"
:style="style"
:rows="rows"
/>
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "@jspreadsheet/formula-charts";
const license = 'NWY0MDI2Mzg4ZDRiMjVhNTBjNjI2NjI0YTJiNDQzMTk2M2M0MjViNWYzNTVhN2ExYjI2MzNhZDg5ZmU0ZDVlYzQ3ZjcyMDM2NzgzOWY2NWFiN2M3MGRjNjlmYWJmZGU5NDNlN2E3Y2VlNjM5ZjNkMWE4YjlmYzNkM2JiNzJkOTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qa3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
return {
columns: [{ width: "150px" }],
rows: { 0: { height: "300px" } },
mergeCells: {
B1: [3, 1],
E1: [10, 1],
},
gridStyle: [
"border-bottom:2px solid black;font-weight:bold;font-size:0.8em",
"border-bottom:2px solid black;font-weight:bold;font-size:0.8em;background-color: #e0eaff",
"border-bottom:1px solid black;font-size:0.8em",
"border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff",
"background-color: #e0eaff",
],
style: { A1: 4, N3: 3, "A3:M3": 0, "A4:M6": 1, "N4:N6": 4 },
license,
};
},
};
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
import "@jspreadsheet/formula-charts";
// Set the license
jspreadsheet.setLicense('NWY0MDI2Mzg4ZDRiMjVhNTBjNjI2NjI0YTJiNDQzMTk2M2M0MjViNWYzNTVhN2ExYjI2MzNhZDg5ZmU0ZDVlYzQ3ZjcyMDM2NzgzOWY2NWFiN2M3MGRjNjlmYWJmZGU5NDNlN2E3Y2VlNjM5ZjNkMWE4YjlmYzNkM2JiNzJkOTQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE1qa3lPVEExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the data grid component
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngAfterViewInit() {
// Create summary spreadsheet
jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
csv: '/jspreadsheet/sales.csv',
csvHeaders: false,
columns: [
{ width:'150px' },
],
defaultColWidth: '50px',
mergeCells: {
B1: [3, 1],
E1: [10, 1]
},
rows: {
0: { height:'300px' }
},
style: {
'A1': 4,
'N3': 3,
'A3:M3': 0,
'A4:M6': 1,
'N4:N6': 4,
}
}],
style: [
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em',
'border-bottom:2px solid black;font-weight:bold;font-size:0.8em;background-color: #e0eaff',
'border-bottom:1px solid black;font-size:0.8em',
'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff',
'background-color: #e0eaff',
],
});
}
}
More examples and documentation
To learn much more about ChartJS extensions for Jspreadsheet: