Documentationkeyboard_arrow_rightExampleskeyboard_arrow_rightChartjs

ChartJS

The =CHART method is deprecated from version 12. Please consider using the Chart Extension.

Examples

Embed charts on your data grid

Integrating charts in your online spreadsheets. See this example implemented using React Data Grid.

<html>
<script src="https://jspreadsheet.com/v11/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/v11/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>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

import "@jspreadsheet/formula-charts";

// Set the license
const license = 'MjJkN2I5MTRjYTZhMjUwY2ViMTA2NWZlYjllMjA4OGUzNzk1YWMwYWY0NWM4ZDFhOGFlZTk5MzgxMDI3Mzk5YWQ2Njk5Yzg1YjQ1ZWE0NTJiZmEwMGRiOWJlZWM2NzlhMzcxNWIyNDljMTE4Yzc5NDE4YWM5ZGNkMDVmODdhZjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EWTJOamd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';

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

<template>
  <Spreadsheet ref="spreadsheet" :license="license" :styles="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";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
 
const license = 'MjJkN2I5MTRjYTZhMjUwY2ViMTA2NWZlYjllMjA4OGUzNzk1YWMwYWY0NWM4ZDFhOGFlZTk5MzgxMDI3Mzk5YWQ2Njk5Yzg1YjQ1ZWE0NTJiZmEwMGRiOWJlZWM2NzlhMzcxNWIyNDljMTE4Yzc5NDE4YWM5ZGNkMDVmODdhZjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EWTJOamd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5';
 
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>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

import "@jspreadsheet/formula-charts";

// Set the license
jspreadsheet.setLicense('MjJkN2I5MTRjYTZhMjUwY2ViMTA2NWZlYjllMjA4OGUzNzk1YWMwYWY0NWM4ZDFhOGFlZTk5MzgxMDI3Mzk5YWQ2Njk5Yzg1YjQ1ZWE0NTJiZmEwMGRiOWJlZWM2NzlhMzcxNWIyNDljMTE4Yzc5NDE4YWM5ZGNkMDVmODdhZjksZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EWTJOamd4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the data grid component
@Component({
    angular: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // 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:

Edit this page on GitHub