valueAlias

Description

The valueAlias property allows developers to customize displayed values in charts and dropdown components. For example, it can be used to replace a UUID with a more readable name in the UI. This property is particularly useful when customizing axis labels or replacing data values in visualizations.

Currently, the valueAlias property is available for the following chart types:

• Area Chart
• Bar Charts
• Line Chart
• Combo Chart

In addition to charts, valueAlias can also be used to replace values in dropdown components, such as Global Filters, making it a versatile tool for enhancing the clarity and usability of data visualizations.

Example Use Case:

It’s possible to programmatically change the axis labels—specifically the x-axis of a bar chart. The valueAlias property can be used to achieve this by mapping specific data values to custom labels, providing more meaningful or user-friendly names in place of raw data.

Types

export type ValueAlias =
  | {
      [id: string]: string | number;
    }
  | ValueAliasFunction;
 
export type ValueAliasFunction = (options?: Component.ValueAliasOptions) => 
  string | number | undefined;
 
export type ValueAliasOptions = {
  fieldId?: string;
  value: string | number;
  filter?: AdditionalFilter;
};

Usage

Here are two examples of how to implement valueAlias:

<Vizzly.Dashboard
  valueAlias={({ fieldId, value, filter }) => {
      if (filter?.title === 'Firm' && value === 'AirTree Ventures') {
        return 'AirTree Ventures, Inc.';
      }
      if (fieldId == 'fie_Venture Capital Firm' && value === 'AirTree Ventures') {
        return 'AirTree Ventures, Inc.';
      }
      return undefined;
  }}
  // ... rest of the props
/>