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" } }] } }) |