ChartJS extensions for JSS

You can include charts on your online spreadsheet using the ChartJS plugin. See more working examples using chartjs

Chart types

Embed charts in your JSS spreadsheets using the methods below
Type Formula pattern Example
Bar =CHART(Type, Labels, Datasets, Options) =CHART("bar", B3:M3, B4:M4, {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Multiple Bars =CHART(Type, Labels, [Datasets], Options) =CHART("bar",B3:M3, [B4:M4, B5:M5, B6:M6], {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Pie =CHART(Type, Labels, Datasets, Options) =CHART("pie", B3:M3, B4:M4, {"title":"My title"})
Line =CHART(Type, Labels, Datasets, Options) =CHART("line" B3:M3, B4:M4, {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Multiple Lines =CHART(Type, Labels, [Datasets], Options) =CHART("line", B3:M3, [B4:M4, B5:M5, B6:M6], {"title":"My title", "titleAxesX":"Month", "titleAxesY":"Units"})
Doughnut =CHART(Type, Labels, Datasets, Options) =CHART("doughnut", B3:M3, B4:M4,{"title":A3, "legend":TRUE, "legendPosition":"right"})
Other Chart of chartJS.org =CHART(Type, Labels, Datasets, Options) =CHART("bar", B3:M3, {"data":B4:M4, "color":PALLETE()}, {"legend":FALSE, "title":"My title"})


DataSets properties

The dataset properties can be used as shown in the table below. All properties for 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 []   =CHART("pie", A4:A6, {"data":[B4,B5,B6]})
Range Range only for DataSets, not available for optionsDataset string   =CHART("pie", A4:A6, {"data":[B4:B6]})
label Label only for DataSets, not available for optionsDataset string DataSet x =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"})
color Color (Border and BackgroundColor with Alpha 50%) string DefaultPallete =CHART("bar", B3:M3, {"data":B4:M4, "color":"red"})
yAxis Multi yAxes. All properties available on Docs Axes ChartJS.org Object   =CHART("line", 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 shown below. For more details and further properties, please visit the official Chartjs Documentation

Name Description Type Example
title Title of chart string =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"title":"my first chart"})
titleAxesX title of AxesX string =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"titleAxesX":"Month"})
titleAxesY title of AxesY string =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"titleAxesX":"Units"})
legend Legend for datasets boolean =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"legend": FALSE})
legendPosition Legend position for datasets : ("top", "left", "bottom", "right") string =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"legendPosition": "left"})
minAxesY min (suggested) of AxesY number =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"minAxesY":0})
maxAxesY max (suggested) of AxesY number =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"maxAxesY":1000})
stackedAxesY stacked AxesY boolean =CHART("line", B3:M3, [B4:M4, B5:M5],{"stackedAxesY":TRUE})
gridLineX grid line X boolean =CHART("bar", B3:M3, {"data":B4:M4, "label":"Service A"},{"gridLineX":FALSE})
gridLineY grid line Y boolean =CHART("bar", 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 =CHART("line", 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" } }] } })