ChartJS
Examples
Embed charts on your data grid
Integrating charts in your online spreadsheets. See this example implemented using React on codesandbox.JavaScript example
<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://jspreadsheet.com/v10/plugins/formula-charts.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.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>
See this example on codesandbox
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; // Set the license const license = 'NmM2NjI2NmUzZjI0ZTAzZjViNmY5MmYyNjE3NzczYzYyYWRmYTJlOTYyMjc1MGVmMGY4NDg5MzllNmFmMzU2MDBjMTUxY2QwNzhjOWQzYjBhMjYwOWUzMmE1YzJhZGJjNmY0ZWNjM2Y3NmYxYWM0NTZlODQ0ZWQ0YzJiM2QwYTIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpjMk15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; // 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> ); }
Vue example
import { Spreadsheet } from "@jspreadsheet/vue"; import cloud from '@jspreadsheet/cloud'; // Set the license jspreadsheet.setLicense('NmM2NjI2NmUzZjI0ZTAzZjViNmY5MmYyNjE3NzczYzYyYWRmYTJlOTYyMjc1MGVmMGY4NDg5MzllNmFmMzU2MDBjMTUxY2QwNzhjOWQzYjBhMjYwOWUzMmE1YzJhZGJjNmY0ZWNjM2Y3NmYxYWM0NTZlODQ0ZWQ0YzJiM2QwYTIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpjMk15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Load the cloud extension jspreadsheet.setExtensions({ cloud }); // Create components export default { components: { Spreadsheet }, template: `<Spreadsheet ref="spreadsheet" cloud="e6e15247-e9fb-40c6-b07d-8519f6a53ca1" />`, };
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import * as charts from "@jspreadsheet/charts"; // Set the license jspreadsheet.setLicense('NmM2NjI2NmUzZjI0ZTAzZjViNmY5MmYyNjE3NzczYzYyYWRmYTJlOTYyMjc1MGVmMGY4NDg5MzllNmFmMzU2MDBjMTUxY2QwNzhjOWQzYjBhMjYwOWUzMmE1YzJhZGJjNmY0ZWNjM2Y3NmYxYWM0NTZlODQ0ZWQ0YzJiM2QwYTIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTmpjMk15d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // 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 ngOnInit() { // 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: