ChartJS integration
Jspreadsheet offers an integration with ChartJS that simplifies integrating charts into the data grid. To see more working examples of this integration, please refer to the ChartJS documentation.See more examples: working examples using chartjs
Documentation
Chart types
Embed charts in your JSS spreadsheets using the methods belowType | 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.orgName | 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 DocumentationName | 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"
}
}]
}
})
|