labelFormat

OptionalSelf-hosted Query Engine In-browser Custom

Description

The labelFormat property allows you to customize the labels displayed on your views at a view level. This gives you the flexibility to provide context-specific labels for your chart legends and view labels, making them more intuitive and relevant for the end users.

Types

export type LabelFormat = (options: Component.LabelFormatOptions) => string | undefined;
 
export type LabelFormatOptions = {
  fieldId: string;
  func: string;
  type: ComponentType;
  defaultLabel: string;
  viewId: string;
  values: Dictionary<string | number | string[] | null>;
};

Usage

To use the labelFormat property returns a string for the custom label or undefined to use the default label. The options object provides context such as the field ID, aggregation function used, component type, default label, and view ID.

Here's an example of how to implement labelFormat:

<Vizzly.Dashboard
  labelFormat={option => {
    // Customize label for a specific field and aggregation function
    if (option.fieldId === 'fie_17' && option.func === 'sum') {
      return `Sum of something`;
    }
    // Customize label for another field and aggregation function
    if (option.fieldId === 'fie_9' && option.func === 'mean') {
      return `Mean ${option.values[0]}`;
    }
    if (option && option.fieldId === 'Tenure' && option.values && option.values['Position'] === 'Lead') {
      return `Only for ${option.values['Position']}`;
    }
    // Return undefined to use the default label for other cases
    return undefined;
  }}
  // ... rest of the props
/>