ChartJS integration
Examples on how to embed charts into a JSS JavaScript spreadsheet. The information can be found on the documentation page.
Main Form
Simple use
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['=CHART("pie", A4:A6, B4:B6)'], [], ['Proposals', 'Votes (%)'], ['Proposal 1', 0.36], ['Proposal 2', 0.29], ['Proposal 3', 0.35], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['=CHART("pie", A4:A6, B4:B6)'], [], ['Proposals', 'Votes (%)'], ['Proposal 1', 0.36], ['Proposal 2', 0.29], ['Proposal 3', 0.35], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
Dataset object
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['=CHART("pie", A4:A6, {"data": (B4:B6), "color": ["#2196F3", "#66BB6A", "#FFEB3B"]})',], [], ['Proposals', 'Votes (%)'], ['Proposal 1', 0.36], ['Proposal 2', 0.29], ['Proposal 3', 0.35], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['=CHART("pie", A4:A6, {"data": (B4:B6), "color": ["#2196F3", "#66BB6A", "#FFEB3B"]})',], [], ['Proposals', 'Votes (%)'], ['Proposal 1', 0.36], ['Proposal 2', 0.29], ['Proposal 3', 0.35], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], } ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
List of Datasets
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['=CHART("bar", B3:M3, [B4:M4, {"data": (B5:M5), "color": "blue", "label": (A5)}, B6:M6]);', '', '', '', '', '', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', '', '', '', '', '', ''], ['Products', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ['Product1', 50, 52, 55, 575, 150, 225, 325, 450, 475, 500, 550, 550], ['Product2', 150, 100, 50, 90, 90, 150, 120, 175, 200, 250, 300, 300], ['Product3', 15, 20, 25, 30, 90, 100, 120, 120, 150, 180, 200, 200], ], mergeCells: { 'A1': [13, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, ], } ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['=CHART("bar", B3:M3, [B4:M4, {"data": (B5:M5), "color": "blue", "label": (A5)}, B6:M6]);', '', '', '', '', '', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', '', '', '', '', '', ''], ['Products', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], ['Product1', 50, 52, 55, 575, 150, 225, 325, 450, 475, 500, 550, 550], ['Product2', 150, 100, 50, 90, 90, 150, 120, 175, 200, 250, 300, 300], ['Product3', 15, 20, 25, 30, 90, 100, 120, 120, 150, 180, 200, 200], ], mergeCells: { 'A1': [13, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, ], } ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
Chart Options
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['=CHART("line", A4:A11, B4:B11, { "legend": FALSE, "titleAxesX": (B1), "titleAxesY": (B2) })',], [], ['Month', 'Sales amount'], ['January', 5], ['February', 22], ['March', 57], ['April', 131], ['May', 204], ['June', 198], ['July', 164], ['August', 243], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['=CHART("line", A4:A11, B4:B11, { "legend": FALSE, "titleAxesX": (B1), "titleAxesY": (B2) })',], [], ['Month', 'Sales amount'], ['January', 5], ['February', 22], ['March', 57], ['April', 131], ['May', 204], ['June', 198], ['July', 164], ['August', 243], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], } ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
Disable property mapping
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['=CHART("line", A4:A11, { "disableJssSimplification": TRUE, "data": (B4:B11), "fill": TRUE, "borderColor": "#FFD54F", "backgroundColor": "#FFE082" }, { "disableJssSimplification": TRUE, "plugins": { "legend": { "display": FALSE } }, "scales": { "x": { "ticks": { "color": "#388E3C" } }, "y": { "ticks": { "color": "#039BE5" } } } })',], [], ['Month', 'Sales amount'], ['January', 5], ['February', 22], ['March', 57], ['April', 131], ['May', 204], ['June', 198], ['July', 164], ['August', 243], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['=CHART("line", A4:A11, { "disableJssSimplification": TRUE, "data": (B4:B11), "fill": TRUE, "borderColor": "#FFD54F", "backgroundColor": "#FFE082" }, { "disableJssSimplification": TRUE, "plugins": { "legend": { "display": FALSE } }, "scales": { "x": { "ticks": { "color": "#388E3C" } }, "y": { "ticks": { "color": "#039BE5" } } } })',], [], ['Month', 'Sales amount'], ['January', 5], ['February', 22], ['March', 57], ['April', 131], ['May', 204], ['June', 198], ['July', 164], ['August', 243], ], minDimensions: [5, 1], mergeCells: { 'A1': [5, 1], }, defaultColWidth: '40px', columns: [ {width: '100px'}, {width: '100px'}, ], rows: {0: {height: '380px'}}, } ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
Sparkline Form
Simple use
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['Line progression', 150, 50, 250, 300, 350, '=CHART("sparkline", B1:F1)'], ], columns: [ {type: 'text', width: '200px'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'text', width: '200px'}, ], rows: { 0: {height: '100px'} }, worksheetName: 'Line progression', }, ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['Line progression', 150, 50, 250, 300, 350, '=CHART("sparkline", B1:F1)'], ], columns: [ {type: 'text', width: '200px'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'text', width: '200px'}, ], rows: { 0: {height: '100px'} }, worksheetName: 'Line progression', }, ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }
Dataset object
Code
<html> <script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-charts@4.0.0/dist/index.min.js"></script> <div id="spreadsheet"></div> <script> jspreadsheet.setLicense('YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'); jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [ { data: [ ['Pie chart', 30, 50, 26, 150, 90, '=CHART("sparkline", { "data": (B1:F1), "color": ["#F06292", "#64B5F6", "#81C784", "#FF7043", "#FFD54F"] }, "pie")'], ], columns: [ {type: 'text', width: '200px'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'text', width: '200px'}, ], rows: {0: {height: '100px'}}, worksheetName: 'Pie chart', }, ] }); </script> </html>
import React, { useRef } from "react"; import { Spreadsheet } from "@jspreadsheet/react"; import "@jspreadsheet/formula-charts"; const license = 'YjI2YTM1ZjgzODMwNzU4NjdhNGM5ODc0ZWNhODNmNjMyY2M5MjE2NTIzOGVmN2YwNGMzMjdlZTA2MWY3NDcxODU5ZTAwOTIwN2M5NDY3NTY4ZjBlYTkzMjU0YTY4ZmQxOGQ5NTBmNzI2ZWM2MzIyODI2NjhhMTdhZTFlZmVjZWYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTURNNE5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5'; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheets const worksheets = [ { data: [ ['Pie chart', 30, 50, 26, 150, 90, '=CHART("sparkline", { "data": (B1:F1), "color": ["#F06292", "#64B5F6", "#81C784", "#FF7043", "#FFD54F"] }, "pie")'], ], columns: [ {type: 'text', width: '200px'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'number'}, {type: 'text', width: '200px'}, ], worksheetName: 'Pie chart', }, ] // Render data grid component return (<Spreadsheet ref={spreadsheet} license={license} worksheets={worksheets} />); }