Tooltip

Tooltip enhances user understanding by providing additional information and detailed data about chart elements such as data points, lines, or other visual components.

To implement tooltips in a Data Chart, use IPlotConfigTooltipOption and IContentEncodingOption interfaces, which define the style and content of tooltips.

Data chart tooltip

In Data Charts, tooltips are configured using the following properties as shown in the table below.

Property	Description
dataChartConfig.plots[0].encodings.tooltip	With this configuration, you can set which fields are displayed in the tooltip. Note that when this property is not explicitly defined, Data Chart automatically adds all fields bound to the chart. You can also refer to data binding documentation for further details.
dataChartConfig.plots[0].config.tooltip	With this configuration, you can set the tooltip's style and controls whether the tooltip is displayed. If the `config.tooltip` property is null, the tooltip is not displayed, even if the `encodings.tooltip` is defined.

Note:
Same fields cannot be displayed multiple times in the tooltip.
Same fields cannot be duplicated in the Tooltip.
If multiple fields are bound, the information is presented based on the first field bound in tooltips.
In the tooltip, if the Aggregate field is set to GC.Spread.Sheets.DataCharts.Aggregate.average, the data is formatted as “0.00".

Using Code

The following code sample shows how to configure tooltips in Data Charts.

Note that this sample uses the "salesTable" data mentioned on the Create Data Charts page. Therefore, make sure you have completed the primary steps outlined on that page to set up a data chart. Once done, you can use the following codes to configure the tooltips. Additionally, you also have the flexibility to customize the data source according to your specific needs.

// dataChartConfig.plots[0].config.tooltip
const sheet = spread.getSheet(0);
sheet.name("ToolTip Config");
sheet.setValue(18, 0, "Hover Over the Data Chart");
sheet.setValue(19, 0, "Data Chart will try to add all the fields bound in the current chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
        tableName: 'Sales',
        plots: [
            {
                type: GC.Spread.Sheets.DataCharts.DataChartType.column,
                encodings: {
                    values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                    category: { field: 'Product' },
                    color: { field: 'Product' },
                },
                config: {
                    // // By setting this property, you can set the style of the Tooltip and control whether the chart displays the Tooltip or not.
                    // When this property is null null, the tooltip is not shown
                    // Although it may be set in the encoding.tooltip property
                    tooltip: [{
                        style: {
                            fill: { type: "CssColor", color: "#fff" },
                            stroke: { type: "CssColor", color: "#E0E0E0" },
                            strokeWidth: 2,
                        },
                        textStyle: {
                            color: "#4a4a4a",
                            fontFamily: "Calibri",
                            fontSize: 12,
                            fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                            fontWeight: "Bold",
                            writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                            textDecoration: { underline: true }
                        }
                    }]
                }
            }
        ]
});

// dataChartConfig.plots[0].encodings.tooltip
const sheet1 = spread.getSheet(1);
sheet1.name("Binding Fields");
sheet1.setValue(18, 0, "Hover Over the Data Chart");
sheet1.setValue(19, 0, "Tooltip Field: Salesman, Aggregate: COUNT");
sheet1.setValue(20, 0, "Tooltip Field: Sales, Aggregate: AVERAGE");
const dataChart2 = sheet1.dataCharts.add('data-chart-2', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart2.setChartConfig({
        tableName: 'Sales',
        plots: [
            {
                type: GC.Spread.Sheets.DataCharts.DataChartType.column,
                encodings: {
                    values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                    category: { field: 'Product' },
                    color: { field: 'Product' },
                    // Bind Some Fields to “dataChartConfig.plots[0].encodings.tooltip”.
                    // If the user does not set this property, DataChart will try to add all the fields boudn in the current chart
                    tooltip: [
                        { field: "Salesman", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.count },
                        { field: "Sales", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.average }
                    ]
                },
                config: {
                    tooltip: [{
                        style: {
                            fill: { type: "CssColor", color: "#fff" },
                            stroke: { type: "CssColor", color: "#E0E0E0" },
                            strokeWidth: 2,
                        },
                    }]
                }
            }
        ]
});

Tooltip

Tooltip Properties

Using Code