Back to Documentation

ChartJS extensions for Jspreadsheet

Learn more about chartJs plugin and create rich online spreadsheets using Jspreadsheet. If you are looking for more examples on how embed charts on your spreadsheet.

Chart types

Embed charts in your jspreadsheet table using the methods below

Type Formula pattern Example
Bar =BARCHART(Labels, Datasets, Options) =BARCHART(B3:M3, B4:M4, {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Multiple Bars =BARCHART(Labels, [Datasets], Options) =BARCHART(B3:M3, [B4:M4, B5:M5, B6:M6], {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Pie =PIECHART(Labels, Datasets, Options) =PIECHART(B3:M3, B4:M4, {"title":"My title"})
Line =LINECHART(Labels, Datasets, Options) =LINECHART(B3:M3, B4:M4, {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Multiple Lines =LINECHART(Labels, [Datasets], Options) =LINECHART(B3:M3, [B4:M4, B5:M5, B6:M6], {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Line filled =LINECHART(Labels, Datasets, Options) =LINECHART(B3:M3, {"data":B4:M4, "fill":TRUE}, {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Multiple Lines filled =LINECHART(Labels, [Datasets], Options) =LINECHART(B3:M3, [{"data":B4:M4, "fill":TRUE, "label":"line 1"}, {"data":B4:M4, "fill":TRUE, "label":"line 2"}], {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Radar =RADARCHART(Labels, Datasets, Options) =RADARCHART(B3:M3, B4:M4, {"title":"My title"})
Doughnut =DOUGHNUTCHART(Labels, Datasets, Options) =DOUGHNUTCHART(B3:M3, B4:M4,{"title":A3, "legend":TRUE, "legendPosition":"right"})
Polar Area =POLARAREACHART(Labels, Datasets, Options) =POLARAREACHART(B3:M3, B4:M4, {"title":"My title"})
Bubble =BUBBLECHART(LabelData, XData, YData, RData, optionsDataset, Options) =BUBBLECHART("Serie 1", B4:M4, B5:M5, B6:M6, {"color":"red"}, {"legend":TRUE, "title":"My title"})
Mutliple series Bubble =BUBBLECHART([LabelData], [XData], [YData], [RData], [optionsDataset], Options) =BUBBLECHART(["Serie 1", "Serie 2"], [B4:M4, B10:M10], [B5:M5, B11:M11], [B6:M6, B12:M12], [{"color":"red"},{"color":"blue"}], {"legend":TRUE, "title":"My title"})
Scatter =SCATTERCHART(LabelData, XData, YData, optionsDataset, Options) =SCATTERCHART("Serie 1", B4:M4, B5:M5, {"color":"red"}, {"legend":TRUE, "title":"My title"})
Mutliple series Scatter =SCATTERCHART([LabelData], [XData], [YData], [optionsDataset], Options) =SCATTERCHART(["Serie 1", "Serie 2"], [B4:M4, B10:M10], [B5:M5, B11:M11], [{"color":"red"},{"color":"blue"}], {"legend":TRUE, "title":"My title"})
Spartkline
type is optionnal, default : line		 =SPARKLINE(Datasets, Type) =SPARKLINE(F4:F6,"pie")
=SPARKLINE({"data":B6:M6, "color":"green"})
=SPARKLINE(F4:F6, "bar")
Other Chart of chartJS.org =CHART(Type, Labels, Datasets, Options) =CHART("bar", B3:M3, {"data":B4:M4, "color":PALLETE()}, {"legend":FALSE, "title":"My title"})
Defined colors theme `` let PALETTE = function () { return ["#FF0000","#CCC", "yellow"]; }

DataSets properties

The dataset properties can be used as table below. All properties of charts can be found at Docs ChartJS.org

Name Description Type Default Example
data Range of Cells only for DataSets , not available for optionsDataset Array [] =PIECHART(A4:A6, {"data":[B4,B5,B6]})
Range Range only for DataSets , not available for optionsDataset string =PIECHART(A4:A6, {"data":[B4:B6]})
label Label only for DataSets , not available for optionsDataset string DataSet x =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"})
color Color (Border and BackgroundColor with Alpha 50%) string DefaultPallete =BARCHART(B3:M3, {"data":B4:M4, "color":"red"})
yAxis Multi yAxes. All properties available on Docs Axes ChartJS.org Object =LINECHART(B3:M3,[{"data":B4:M4,"yAxis":{id:"y1", "position":"left"}}, {"data":B5:M5, "yAxis":{id:"y2", "position":"right"}}, {"data":B6:M6, "yAxis":{id:"y1"}}])
Example with properties of ChartJS.org All properties available on Docs ChartJS.org Object|string|boolean =CHART("line",B3:M3,{"data":B4:M4, "fill": TRUE, "backgroundColor":"#FF0000", "borderColor":"#000000", "borderWidth":2})

Properties Options

The properties for a chart can be used as below. For more details and further properties, please visit the official Chartjs Documentation

Name Description Type Example
title Title of chart string =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"title":"my first chart"})
titleAxesX title of AxesX string =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"titleAxesX":"Month"})
titleAxesY title of AxesY string =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"titleAxesX":"Units"})
legend Legend of datasets boolean =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"legend": FALSE})
legendPosition Legend position of datasets : ("top", "left", "bottom", "right") string =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"legendPosition": "left"})
minAxesY min (suggested) of AxesY number =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"minAxesY":0})
maxAxesY max (suggested) of AxesY number =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"maxAxesY":1000})
stackedAxesY stacked AxesY boolean =LINECHART(B3:M3, [B4:M4, B5:M5],{"stackedAxesY":TRUE})
gridLineX grid line X boolean =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"gridLineX":FALSE})
gridLineY grid line Y boolean =BARCHART(B3:M3, {"data":B4:M4, "label":"Service A"},{"gridLineY":FALSE})
Example with properties of ChartJS.org All properties available on Docs Axes ChartJS.org Object =LINECHART(B3:M3, [B4:M4, B5:M5],{ "responsive": TRUE, "title": { "display": TRUE, "text": "Chart.js Line Chart" }, "tooltips": { "mode": "index", "intersect": FALSE, }, "scales": { "xAxes": [{ "display": TRUE, "scaleLabel": { "display": TRUE, "labelString": "Month" } }], "yAxes": [{ "display": TRUE, "scaleLabel": { "display": TRUE, "labelString": "Value" } }] } })

Edit this page on GitHub