Scatter Charts

Scatter charts are commonly used to illustrate relationships between individual items or categories. This type of chart is often used to represent scientific data and emphasizes the deviations of the assembled data from the predicted data or outcomes.

SpreadJS provides various types of scatter charts that can be customized by modifying chart properties, such as color palette, graph opacity, point symbols, data label styles, and the styles of the category and value axes. These changes can be implemented 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.

Scatter Chart

A scatter chart visually represents the relationship between two numerical variables. Each data point on the chart corresponds to an observation for the two variables being plotted. The position of each point is determined by its x-coordinate (horizontal axis) and y-coordinate (vertical axis).

An image of a scatter chart is shown below:

Scatter Chart

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

// Scatter Chart
const sheet = spread.getActiveSheet();
sheet.name("Scatter Chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 600, 400);
dataChart.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Scatter Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.scatter,
            encodings: {
                values: [
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                color: {
                    field: "Product"
                }
            }
        }
    ]
});

Bubble Chart

A bubble chart displays the variations of a scatter chart where data points are replaced with bubbles and a third dimension is represented (z axis) in the shape of the bubbles. The position of each bubble is dictated by its values on the x and y axes, while the size of the bubble indicates a third numerical value.

An image of a bubble chart is shown below:

Bubble Chart

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

// Bubble Chart
const sheet = spread.getActiveSheet();
sheet.name("Bubble Chart");
const dataChart2 = sheet.dataCharts.add('data-chart-2', 10, 10, 600, 400);
dataChart2.setChartConfig({
    tableName: 'Sales',
    config: {
        header: {
            title: "Bubble Chart"
        }
    },
    plots: [
        {
            type: GC.Spread.Sheets.DataCharts.DataChartType.bubble,
            encodings: {
                values: [
                    {
                        field: "Return",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    },
                    {
                        field: "Sales",
                        aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                    }
                ],
                color: {
                    field: "Product"
                },
                size: {
                    field: "Return",
                    aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum
                }
            }
        }
    ]
});