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} />);
}