SpreadJS allows users to configure chart area and plot area while visualizing data in the spreadsheets. Basically, 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 can be 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 own 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 readability of the plotted data.
• Draw attention towards a specific chart among different types of charts while working with large spreadsheets.

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

Using Code

The following example code 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);