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://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>
See this example on codesandbox
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; // Set the license const license = 'OWFlYThkYjRmNWEwN2JkZWU2MTI5ODVhNTcxZDlmMTcxNDQ0MTVkYmM2YTU2OGM3YTljNTdjZGZkZGNhNjkxMzRmNGQ1MTIzYjg4YmM1Mzg0NWE3OTQ2ZGNlOWExODhiZDllZDdhMWVjZGVjM2RhMzBjMzJiNGI3NmJhNzBjYmEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpreU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; // 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
<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 = 'OWFlYThkYjRmNWEwN2JkZWU2MTI5ODVhNTcxZDlmMTcxNDQ0MTVkYmM2YTU2OGM3YTljNTdjZGZkZGNhNjkxMzRmNGQ1MTIzYjg4YmM1Mzg0NWE3OTQ2ZGNlOWExODhiZDllZDdhMWVjZGVjM2RhMzBjMzJiNGI3NmJhNzBjYmEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpreU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; 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>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; import "@jspreadsheet/formula-charts"; // Set the license jspreadsheet.setLicense('OWFlYThkYjRmNWEwN2JkZWU2MTI5ODVhNTcxZDlmMTcxNDQ0MTVkYmM2YTU2OGM3YTljNTdjZGZkZGNhNjkxMzRmNGQ1MTIzYjg4YmM1Mzg0NWE3OTQ2ZGNlOWExODhiZDllZDdhMWVjZGVjM2RhMzBjMzJiNGI3NmJhNzBjYmEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTWpreU9Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); // 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: