Pattern Fill

The Pattern Fill is a richer display effect for chart element background color. We provide 48 built-in pattern fill types.

For more rich customization of the chart, now you can set normal css color or pattern fill for chart element background color. you can set pattern fill for below chart element title series data Label legend chartArea Customize: there are three property for pattern fill. type: Specify the pattern fill type, refer GC.Spread.Sheets.Charts.PatternType foregroundColor: Specify the pattern fill color of lines or dots. backgroundColor: Specify the pattern fill background color. You can customize the pattern fill using the following code:
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var dataArray1 = [ ["", '2012', '2013', '2014', '2015', '2016', '2017'], ["Chrome", 5.782, 6.263, 7.766, 8.389, 9.830, 11.260], ["FireFox", 4.284, 4.130, 3.951, 3.760, 3.631, 3.504], ["IE", 2.814, 2.491, 2.455, 1.652, 1.073, 0.834], ]; var dataArray2 = [ ['Region', 'Subregion', 'country', 'Population'], ['Asia', 'Southern', 'India', 1354051854], [, , 'Pakistan', 200813818], [, , 'Bangladesh', 166368149], [, , 'Others', 170220300], [, 'Eastern', 'China', 1415045928], [, , 'Japan', 127185332], [, , 'Others', 111652273], [, 'South-Eastern', , 655636576], [, 'Western', , 272298399], [, 'Central', , 71860465], ['Africa', 'Eastern', , 433643132], [, 'Western', , 381980688], [, 'Northern', , 237784677], [, 'Others', , 234512021], ['Europe', , , 742648010], ['Others', , , 1057117703] ]; sheet.setArray(0, 0, dataArray1); sheet.setArray(0, 8, dataArray2); var columnChart = sheet.charts.add('columnChart', GC.Spread.Sheets.Charts.ChartType.columnClustered, 2, 85, 400, 350, 'A1:G4'); var treemapChart = sheet.charts.add('treemapChart', GC.Spread.Sheets.Charts.ChartType.treemap, 450, 85, 400, 350, 'I1:L17'); var chartArea = columnChart.chartArea(); chartArea.backColor = { type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20, foregroundColor: "rgb(0,176,80)", backgroundColor: "background 1 0", }; columnChart.chartArea(chartArea); var seriesCollection = columnChart.series(); var series0 = seriesCollection.get(0); series0.backColor = { type: GC.Spread.Sheets.Charts.PatternType.darkVertical, foregroundColor: "blue", backgroundColor: "white", }; seriesCollection.set(0, series0); var series1 = seriesCollection.get(1); series1.backColor = { type: GC.Spread.Sheets.Charts.PatternType.smallGrid, foregroundColor: "green", backgroundColor: "white", }; seriesCollection.set(1, series1); var series2 = seriesCollection.get(2); series2.backColor = { type: GC.Spread.Sheets.Charts.PatternType.solidDiamond, foregroundColor: "orange", backgroundColor: "white", }; seriesCollection.set(2, series2) var dataPoints = treemapChart.series().dataPoints(); var fillColors = [{ type: GC.Spread.Sheets.Charts.PatternType.darkUpwardDiagonal, foregroundColor: "LightGreen", backgroundColor: "white", }, { type: GC.Spread.Sheets.Charts.PatternType.largeCheckerBoard, foregroundColor: "yellow", backgroundColor: "white", }, { type: GC.Spread.Sheets.Charts.PatternType.lightUpwardDiagonal, foregroundColor: "purple", backgroundColor: "white", }, { type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40, foregroundColor: "LightBlue", backgroundColor: "white", } ]; for (var i = 0; i < fillColors.length; i++) { var dataPoint = dataPoints.get(i); dataPoint.fillColor = fillColors[i]; dataPoints.set(i, dataPoint); } var dataLabels = treemapChart.dataLabels(); dataLabels.color='black'; treemapChart.dataLabels(dataLabels); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100% ; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }