Chart Area and Plot Area

SpreadJS allows users to configure chart area and plot area while visualizing data in the spreadsheets. The chart area refers to the large region occupied by a chart in the worksheet. It includes all other chart elements. The chartArea method in the Chart class is used to customize the chart area.

Plot Area refers to the region that represents the plotted data in a chart.

Customize Chart Area Border

Although every chart has its border, it is often more helpful to customize the default chart area border using properties like color, transparency, width, and dash style to match your specific preferences and worksheet theme.

Customizing the chart area border helps users to:

• Create an aesthetic appeal by highlighting the graphical representation of data.

• Enable enhanced control over the appearance of charts in the worksheet.

• Enhance the readability of the plotted data.

• Draw attention to a specific chart among different types of charts while working with large spreadsheets.

The following screenshot depicts a chart representing the annual sales records for different products - Mobile Phones, Laptops, and Tablets.

The following code sample depicts how to add a custom border to the chart area.

var activeSheet = spread.getActiveSheet();
activeSheet.suspendPaint();
// Prepare data for chart
activeSheet.setValue(0, 1, "Y-2016");
activeSheet.setValue(0, 2, "Y-2017");
activeSheet.setValue(0, 3, "Y-2018");
activeSheet.setValue(1, 0, "Mobile Phones");
activeSheet.setValue(2, 0, "Laptops");
activeSheet.setValue(3, 0, "Tablets");      
for (var r = 1; r <= 3; r++)
{
  for (var c = 1; c <= 3; c++) {
    activeSheet.setValue(r, c, parseInt(Math.random() * 10000));
  }
}
// Add chart
var chart = activeSheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 20, 110, 550, 250, "A1:D4");
// Configure ChartArea
var chartArea = chart.chartArea();
chartArea.backColor = "#DBF3FA";
chartArea.backColorTransparency = 0.1;
chartArea.fontSize = 14;
// Set ChartArea's Border Style
chartArea.border.width = 3;
chartArea.border.dashStyle = 4;
chartArea.border.color = "red";
chartArea.border.transparency = 0.5;
chart.chartArea(chartArea);
              
// Configure Chart Title
var title = chart.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "#696969";
chart.title(title);