ChartJS
Integrating charts in your online spreadsheets. See this example implemented using React on codesandbox.Source code
Using CDN
Using NPM
<html> <script src="https://jspreadsheet.com/v8/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/v8/jspreadsheet.css" type="text/css" /> <script src="https://jspreadsheet.com/v8/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' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'100px' }, ], mergeCells: { B1: [3, 1], E1: [10, 1] }, rows: { 0: { height:'300px' } }, style: { A1: 'background-color: #e0eaff', N1: '', // Row 3 A3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', B3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', C3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', D3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', E3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', F3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', G3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', H3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', I3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', J3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', K3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', L3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', M3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', N3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;background-color: #e0eaff', // Row 4 A4: 'border-bottom:1px solid black;font-size:0.8em;', B4: 'border-bottom:1px solid black;font-size:0.8em;', C4: 'border-bottom:1px solid black;font-size:0.8em;', D4: 'border-bottom:1px solid black;font-size:0.8em;', E4: 'border-bottom:1px solid black;font-size:0.8em;', F4: 'border-bottom:1px solid black;font-size:0.8em;', G4: 'border-bottom:1px solid black;font-size:0.8em;', H4: 'border-bottom:1px solid black;font-size:0.8em;', I4: 'border-bottom:1px solid black;font-size:0.8em;', J4: 'border-bottom:1px solid black;font-size:0.8em;', K4: 'border-bottom:1px solid black;font-size:0.8em;', L4: 'border-bottom:1px solid black;font-size:0.8em;', M4: 'border-bottom:1px solid black;font-size:0.8em;', N4: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 5 A5: 'border-bottom:1px solid black;font-size:0.8em;', B5: 'border-bottom:1px solid black;font-size:0.8em;', C5: 'border-bottom:1px solid black;font-size:0.8em;', D5: 'border-bottom:1px solid black;font-size:0.8em;', E5: 'border-bottom:1px solid black;font-size:0.8em;', F5: 'border-bottom:1px solid black;font-size:0.8em;', G5: 'border-bottom:1px solid black;font-size:0.8em;', H5: 'border-bottom:1px solid black;font-size:0.8em;', I5: 'border-bottom:1px solid black;font-size:0.8em;', J5: 'border-bottom:1px solid black;font-size:0.8em;', K5: 'border-bottom:1px solid black;font-size:0.8em;', L5: 'border-bottom:1px solid black;font-size:0.8em;', M5: 'border-bottom:1px solid black;font-size:0.8em;', N5: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 6 A6: 'border-bottom:1px solid black;font-size:0.8em;', B6: 'border-bottom:1px solid black;font-size:0.8em;', C6: 'border-bottom:1px solid black;font-size:0.8em;', D6: 'border-bottom:1px solid black;font-size:0.8em;', E6: 'border-bottom:1px solid black;font-size:0.8em;', F6: 'border-bottom:1px solid black;font-size:0.8em;', G6: 'border-bottom:1px solid black;font-size:0.8em;', H6: 'border-bottom:1px solid black;font-size:0.8em;', I6: 'border-bottom:1px solid black;font-size:0.8em;', J6: 'border-bottom:1px solid black;font-size:0.8em;', K6: 'border-bottom:1px solid black;font-size:0.8em;', L6: 'border-bottom:1px solid black;font-size:0.8em;', M6: 'border-bottom:1px solid black;font-size:0.8em;', N6: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', } }] }); </script> </html>
// Jspreadsheet Pro import jspreadsheet from 'jspreadsheet'; // Formula Premium Plugin import '@jspreadsheet/formula-charts'; // License for Formula Plugin jspreadsheet.setLicense('your-license'); // Create a spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ csv: '/jspreadsheet/sales.csv', csvHeaders: false, columns: [ { width:'150px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'50px' }, { width:'100px' }, ], mergeCells: { B1: [3, 1], E1: [10, 1] }, rows: { 0: { height:'300px' } }, style: { A1: 'background-color: #e0eaff', N1: '', // Row 3 A3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', B3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', C3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', D3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', E3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', F3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', G3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', H3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', I3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', J3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', K3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', L3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', M3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;', N3: 'border-bottom:2px solid black; font-weight:bold;font-size:0.8em;background-color: #e0eaff', // Row 4 A4: 'border-bottom:1px solid black;font-size:0.8em;', B4: 'border-bottom:1px solid black;font-size:0.8em;', C4: 'border-bottom:1px solid black;font-size:0.8em;', D4: 'border-bottom:1px solid black;font-size:0.8em;', E4: 'border-bottom:1px solid black;font-size:0.8em;', F4: 'border-bottom:1px solid black;font-size:0.8em;', G4: 'border-bottom:1px solid black;font-size:0.8em;', H4: 'border-bottom:1px solid black;font-size:0.8em;', I4: 'border-bottom:1px solid black;font-size:0.8em;', J4: 'border-bottom:1px solid black;font-size:0.8em;', K4: 'border-bottom:1px solid black;font-size:0.8em;', L4: 'border-bottom:1px solid black;font-size:0.8em;', M4: 'border-bottom:1px solid black;font-size:0.8em;', N4: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 5 A5: 'border-bottom:1px solid black;font-size:0.8em;', B5: 'border-bottom:1px solid black;font-size:0.8em;', C5: 'border-bottom:1px solid black;font-size:0.8em;', D5: 'border-bottom:1px solid black;font-size:0.8em;', E5: 'border-bottom:1px solid black;font-size:0.8em;', F5: 'border-bottom:1px solid black;font-size:0.8em;', G5: 'border-bottom:1px solid black;font-size:0.8em;', H5: 'border-bottom:1px solid black;font-size:0.8em;', I5: 'border-bottom:1px solid black;font-size:0.8em;', J5: 'border-bottom:1px solid black;font-size:0.8em;', K5: 'border-bottom:1px solid black;font-size:0.8em;', L5: 'border-bottom:1px solid black;font-size:0.8em;', M5: 'border-bottom:1px solid black;font-size:0.8em;', N5: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', // Row 6 A6: 'border-bottom:1px solid black;font-size:0.8em;', B6: 'border-bottom:1px solid black;font-size:0.8em;', C6: 'border-bottom:1px solid black;font-size:0.8em;', D6: 'border-bottom:1px solid black;font-size:0.8em;', E6: 'border-bottom:1px solid black;font-size:0.8em;', F6: 'border-bottom:1px solid black;font-size:0.8em;', G6: 'border-bottom:1px solid black;font-size:0.8em;', H6: 'border-bottom:1px solid black;font-size:0.8em;', I6: 'border-bottom:1px solid black;font-size:0.8em;', J6: 'border-bottom:1px solid black;font-size:0.8em;', K6: 'border-bottom:1px solid black;font-size:0.8em;', L6: 'border-bottom:1px solid black;font-size:0.8em;', M6: 'border-bottom:1px solid black;font-size:0.8em;', N6: 'border-bottom:1px solid black;font-size:0.8em;background-color: #e0eaff', } }] });
More examples and documentation
To learn much more about chartjs extensions for Jspreadsheet: