
Charts Integration
The new chart extension bring several new chart types and a more similar engine used in other spreadsheet software allowing better integration results, for example when importing or exporting to XLSX files. In this version, the chart are integrate used the media
worksheet attribute, and you can use setMedia to programmatically add charts.
Important Notes
The new chart extension in Jspreadsheet now utilizes the media
property, offering separation from cell data and introducing a wide array of new charting options with entirely revamped properties to better compatibility with other spreadsheet software such as Excel and Google Sheets.
Documentation
Initial Setting
Settings |
Description |
type?: String |
One of the chart types describe below. |
options?: Object |
Chart options |
top?: Number |
Floating chart relative top position. Default 0px |
left?: Number |
Floating chart relative left position. Default 0px |
width?: Number |
Floating chart width. Default 400px |
height?: Number |
Floating chart height. Default 300px |
zIndex?: Number |
Floating chart zIndex. Default 3 |
Chart Types
Chart types |
Area |
Bar |
Bubble |
Column |
Doughnut |
FilledRadar |
Histogram |
Line |
Pareto |
PercentArea |
PercentBar |
PercentColumn |
Pie |
Radar |
Scatter |
StackedArea |
StackedBar |
StackedColumn |
Animations
To disable the animations during a update on the spreadsheet.
charts({ animations: false });
Installation
Please choose one of the following options
Using NPM
$ npm install @jspreadsheet/charts
Using a CDN
You can include the charts on your browser as below. To run the extension please make sure all extensions area loaded, as shown on the following example.
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/index.min.js"></script>
Examples
Floating Data grid Charts
Create a new data grid with a basic column chart on Jspreadsheet Pro.
(Double-click on the chart to edit the chart settings)
<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/charts/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.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>
<div id="spreadsheet"></div>
<script>
jspreadsheet.setLicense('ODZjMzUxYjM2Yzk0OTJjYzIwOTMyODc2Njc0ZjVjYjZlNTVhMmFlMDNjYTcwNGNkN2Q3MzNiNmViNzk0Mzc2YmI5NTkyMTY3OWNkODMyODJiZTdkMDQ2OTcyODU0Y2I0NzMxMDNlYTkyZWE2MjM4NjgzMDlmNTcyOGMxMWVkMDAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU56RTRNak01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({ formula, charts });
jspreadsheet(document.getElementById('spreadsheet'), {
toolbar: true,
worksheets: [{
minDimensions: [6,6],
data: [
['Months','Product A','Product B'],
['Jan','400','234'],
['Fev','300','431'],
['Mar','200','134'],
['Apr','321','513'],
],
media: [{
type: 'chart',
options: {
type: 'column',
range: 'A1:C5',
},
top: 10,
left: 300,
width: 400,
height: 300,
}]
}],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";
import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.css"
import "@jspreadsheet/charts/dist/style.css";
jspreadsheet.setLicense('ODZjMzUxYjM2Yzk0OTJjYzIwOTMyODc2Njc0ZjVjYjZlNTVhMmFlMDNjYTcwNGNkN2Q3MzNiNmViNzk0Mzc2YmI5NTkyMTY3OWNkODMyODJiZTdkMDQ2OTcyODU0Y2I0NzMxMDNlYTkyZWE2MjM4NjgzMDlmNTcyOGMxMWVkMDAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU56RTRNak01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({ formula, charts });
export default function App() {
const spreadsheet = useRef();
const data = [
['Months','Product A','Product B'],
['Jan','400','234'],
['Fev','300','431'],
['Mar','200','134'],
['Apr','321','513'],
];
const media = [{
type: 'chart',
options: {
type: 'column',
range: 'A1:C5',
},
top: 10,
left: 300,
width: 400,
height: 300,
}]
return (
<Spreadsheet ref={spreadsheet} toolbar={true}>
<Worksheet data={data} media={media} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" toolbars>
<Worksheet :data="data" :media="media" :minDimensions="[10,10]" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";
import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.css"
import "@jspreadsheet/charts/dist/style.css";
jspreadsheet.setLicense('ODZjMzUxYjM2Yzk0OTJjYzIwOTMyODc2Njc0ZjVjYjZlNTVhMmFlMDNjYTcwNGNkN2Q3MzNiNmViNzk0Mzc2YmI5NTkyMTY3OWNkODMyODJiZTdkMDQ2OTcyODU0Y2I0NzMxMDNlYTkyZWE2MjM4NjgzMDlmNTcyOGMxMWVkMDAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU56RTRNak01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({ formula, charts });
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const data = [
['Months','Product A','Product B'],
['Jan','400','234'],
['Fev','300','431'],
['Mar','200','134'],
['Apr','321','513'],
];
const media = [{
type: 'chart',
options: {
type: 'column',
range: 'A1:C5',
},
top: 10,
left: 300,
width: 400,
height: 300,
}]
return {
data,
media
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import charts from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";
import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "@jspreadsheet/charts/dist/style.css";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
jspreadsheet.setLicense('ODZjMzUxYjM2Yzk0OTJjYzIwOTMyODc2Njc0ZjVjYjZlNTVhMmFlMDNjYTcwNGNkN2Q3MzNiNmViNzk0Mzc2YmI5NTkyMTY3OWNkODMyODJiZTdkMDQ2OTcyODU0Y2I0NzMxMDNlYTkyZWE2MjM4NjgzMDlmNTcyOGMxMWVkMDAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRMU56RTRNak01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet.setExtensions({ formula, charts });
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
toolbar: true,
worksheets: [{
minDimensions: [8,8],
data: [
['Months','Product A','Product B'],
['Jan','400','234'],
['Fev','300','431'],
['Mar','200','134'],
['Apr','321','513'],
],
media: [{
type: 'chart',
options: {
type: 'column',
range: 'A1:C5',
},
top: 10,
left: 300,
width: 400,
height: 300,
}]
}],
});
}
}
Previous version
Previous Version