# Chart Area and Plot Area

A tutorial showing how to customize the chart and plot areas of a chart using specific API in SpreadJS

## Content

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](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart#chartArea) in the [Chart class](/spreadjs/api/v19/classes/GC.Spread.Sheets.Charts.Chart) 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.
![SpreadJS clustered column chart titled “Annual Sales Record” with a light blue chart area and a semi-transparent red dashed border around product sales data.](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/spreadjsv13images/custom-area-border.png)
The following code sample depicts how to add a custom border to the chart area.

```javascript
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); 
activeSheet.resumePaint();
```

## Customize Plot Area Fill and Border

The plot area is the region where chart data is drawn. You can customize the plot area background and border to distinguish the plotted data area from the rest of the chart.
The following code sample sets the plot area fill color and border style.

```javascript
chart.plotArea({
    backColor: "red",
    backColorTransparency: 0.6,
    border: {
        color: "blue",
        transparency: 0.6,
        width: 2,
        dashStyle: GC.Spread.Sheets.Charts.LineType.dash
    }
});
```

In Designer, select the plot area and use the **Format Plot Area** side panel to configure fill and border options.
![SpreadJS Designer Format Plot Area side panel providing fill color, transparency, border color, width, and dash style controls for the selected chart plot area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260710.7d860e.png?caption=Format%20Plot%20Area%20Fill%20and%20Border&width=250)

## Set Plot Area Layout

You can set the plot area layout to control the position and size of the plot area within the chart.
The following code sample sets the plot area layout.

```javascript
chart.plotArea({
    layout: {
        x: 0.2,
        y: 0.1,
        width: 0.6,
        height: 0.8
    }
});
```

In Designer, select the plot area and use the **Format Plot Area** side panel to configure the plot area position and size.
![SpreadJS Designer Format Plot Area side panel providing layout controls for setting the selected plot area’s horizontal position, vertical position, width, and height.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260710.23eace.png?width=250&caption=Format%20Plot%20Area%20Layout)

>type=note
> **Note:** Plot area layout is not supported for treemap, sunburst, waterfall, and funnel charts.