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