Radar Charts

Radar charts are radial charts that compare two or more groups of values across various features or characteristics. These charts represent each variable on a separate axis which is arranged radially around a center at equal distances from each other. Each of these axes shares the same tick marks and scale. The data for each observation is plotted along these axes and then combined to form a polygon. This type of chart is generally used for analyzing performance or comparing values such as revenue and expense.

SpreadJS supports various types of radar charts that can be customized by modifying chart properties, such as set color palette, graph opacity, point symbol, category and value axes styles, and so on. These modifications can be made either through code or by using the Inspector tab in the SpreadJS Designer.

type=note
All of the samples in this topic are based on the "salesTable" data from the Create Data Charts page. Therefore, make sure you have followed the primary steps mentioned on that page for adding a Data Chart. You can also customize the data source to meet your specific needs.

Radar Chart

A radar chart is a graphical method of displaying multivariate data in a two-dimensional format, where three or more quantitative variables are represented on axes starting from the same point. This chart is called a radar chart because the lines connecting the data points resemble the spokes of a wheel or the radar screen of a plane.

An image of a radar chart is shown below:

Radar chart

Refer to the following sample code to add a radar chart.

// Radar Chart
const sheet = spread.getActiveSheet();
sheet.name("Radar Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Radar Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.radar,
            encodings: {
                values: [
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                category: {
                    field: "Salesman"
                },
                color: {
                    field: "Product"
                },
                filter: {
                    operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                    conditions: [
                        {
                            field: "Region",
                            excludeMatched: false,
                            operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                            value: ["East"]
                        }
                    ]
                }
            }
        }
    ]
});

Filled Radar Chart

A filled radar chart is a variation of the traditional radar chart where the area enclosed by the data points is filled to create a solid shape. In this type of chart, the space between data points and the central point is shaded or colored to highlight the area covered by the data series.

An image of a filled radar chart is shown below:

Filled Radar Chart

Refer to the following sample code to add a filled radar chart.

// Filled Radar Chart
const sheet = spread.getActiveSheet();
sheet.name("Filled Radar Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
     tableName: 'Sales',
     config: {
         header: {
             title: "Filled Radar Chart"
         },
     },
     plots: [
         {
             type: GC.Spread.Sheets.DataCharts.DataChartType.filledRadar,
             encodings: {
                 values: [
                     {
                         field: "Sales",
                         aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                     }
                 ],
                 category: {
                     field: "Salesman"
                 },
                 color: {
                     field: "Product"
                 },
                 filter: {
                     operate: GC.Spread.Sheets.DataCharts.LogicalOperation.and,
                     conditions: [
                         {
                             field: "Region",
                             excludeMatched: false,
                             operate: GC.Spread.Sheets.DataCharts.ComparisonOperator.in,
                             value: ["East"]
                         }
                     ]
                 }
             },
         }
     ]
});