SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Charts / Chart Elements / Chart Area and Plot Area
In This Topic
    Chart Area and Plot Area
    In This Topic

    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:

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

    Customized chart area border 

    Using Code

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

    JavaScript
    Copy Code
    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);