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 chart customization, you can set normal CSS colors or pattern fills for chart element background colors. You can set the pattern fill for the below chart elements: title series data Label legend chartArea Customize: There are three properties 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }