
Charts
JSS charts is a premium JSS extension to create interactive and dynamic charts based on any data available in your online spreadsheets. The plugin integrates JSS with the ChartJS engine and delivers amazing rich charts directly to your applications.Author
Jspreadsheet Pro Team.License
Available on the premium or enterprise plan.Configuration
The following options are available to customize the plugin's behavior:Method | Description |
---|---|
width: Number | Floating chart width. Default 400px |
height: Number | Floating chart height. Default 300px |
top: Number | Floating chart relative top position. Default 0px |
left: Number | Floating chart relative left position. Default 0px |
zIndex: Number | Floating chart zIndex. Default 3 |
chart: ChartJS Object | Define the ChartJS object. For more information on this, please consult the official ChartJS page. |
Example
Load the spreadsheet with some basic charts.Source code
Using CDN
Using NPM
<html> <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro/dist/index.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" /> <div id="spreadsheet"></div> <script> // License for Formula Plugin jspreadsheet.setLicense('NjY5ZDg2YmRmZTE3NzVlNTY4ZmE2NGZjOTRhMWNhOWM0ZmU1NTg1MmQ1NzUzYWYyYmE4ZTgyODdmMDMzMmM2NDQ3NjFkNjgyODE1ZTkzOWRhODFjNjViM2ZmNjc4NmFlMjdjZDI0OWE5YzY3M2YzNWFkZGU0NTg2ZTI5MTdlZjMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFMU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Set the extensions jspreadsheet.setExtensions({ formula, charts }); // Create the spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { toolbar: true, worksheets: [{ minDimensions: [8,8], data: [ ['Test','',''], ['Jan','400','234'], ['Fev','300','431'], ['Mar','200','134'], ['Apr','321','513'], ], cells: { B1: { type:'chart', chart: { type: 'bar', data: { labels: 'get(A2:A5)', datasets: [{ label: 'get(A1)', backgroundColor: ['#C1D37F'], borderColor: '#000', data: 'get(B2:B5)', }] }, }, left: 500, top: 60, zIndex: 4, }, C1: { type:'chart', chart: { type: 'line', data: { labels: 'get(A2:A5)', datasets: [{ label: 'get(A1)', backgroundColor: ['#000'], borderColor: '#000', data: 'get(C2:C5)', }] }, }, left: 480, top: 40, } } }], }); </script> </html>
// Jspreadsheet Pro import jspreadsheet from 'jspreadsheet'; // Formula Premium Plugin import formula from '@jspreadsheet/charts'; // License for Formula Plugin jspreadsheet.setLicense('NjY5ZDg2YmRmZTE3NzVlNTY4ZmE2NGZjOTRhMWNhOWM0ZmU1NTg1MmQ1NzUzYWYyYmE4ZTgyODdmMDMzMmM2NDQ3NjFkNjgyODE1ZTkzOWRhODFjNjViM2ZmNjc4NmFlMjdjZDI0OWE5YzY3M2YzNWFkZGU0NTg2ZTI5MTdlZjMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFMU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0='); // Add-on for Jspreasheet jspreadsheet.setExtensions({ charts }); // Create a spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { minDimensions: [10, 10] }, { minDimensions: [10, 10] }, ] });