Data Labels

OrbCharts has a special labeling system that allows multiple data points to be tagged with individual labels. This enables the selection of elements using label names through OrbCharts operations. The specific uses are as follows:

Color presentation of chart elements
Displaying label text on the chart (e.g., legend, axis labels, etc.)
Selecting elements to highlight

The labels that can be tagged on the data are closely related to the design of the data structure. Therefore, depending on the design of the six data formats, there are different labels and tagging methods available. The following sections explain each one, so you can choose to read based on your needs.

TIP

In OrbCharts, the system internally assigns default labels to each data point (according to the data structure). Therefore, manually adding labels is not necessary. However, most of the time, we need some text to label the graphical elements on the chart. For example, we might need a "legend" to explain what each color represents, or we might need to add an X-axis with labels for each bar in a bar chart. Therefore, we recommend considering this chapter as essential learning and operation content.

Series

The Series data category has two types of labels: label and seriesLabels.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions.
Example:

Format example of data$ before adding label:

Example after adding label:

[
  [
    {
      label: 'Taipei',
      value: 50000
    },
    {
      label: 'Taichung',
      value: 40000
    },
    {
      label: 'Kaohsiung',
      value: 30000
    }
  ]
]

`seriesLabels`

API: dataFormatter$
Description: Used to tag the array data within data$, each label corresponds to a set of array data (for more details on the data$ data structure, refer to the API documentation).
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next([
  [ 80, 120, 45 ],
  [ 50, 30, 15, 28 ],
  [ 55, 13, 38, 10, 5 ]
])
// dataFormatter$
chart.dataFormatter$.next({
  seriesLabels: ['Keywords', 'People', 'Brands']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})

dataFormatter$'s seriesLabels uses three labels to correspond to three sets of array data:

'Keywords' -> [ 80, 120, 45 ]

'People' -> [ 50, 30, 15, 28 ]

'Brands' -> [ 55, 13, 38, 10, 5 ]

A common use case is the legend - for example, SeriesLegend will draw these three labels with corresponding colors and names.

chartParams$ sets a color palette in colors[type].label, corresponding to the seriesLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> Keywords

'#6794DC' -> People

'#6771DC' -> Brands

Grid

The Grid data category has three types of labels: label, rowLabels, and columnLabels.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions.
Example:

Format example of data$ before adding label:

[
  [ 55, 80, 50, 11, 150 ],
  [ 35, 40, 15, 65, 120 ]
]

Example after adding label:

[
  [
    {
      label: 'Import-Q1',
      value: 55
    },
    {
      label: 'Import-Q2',
      value: 80
    },
    {
      label: 'Import-Q3',
      value: 50
    },
    {
      label: 'Import-Q4',
      value: 11
    }
  ],
  [
    {
      label: 'Export-Q1',
      value: 35
    },
    {
      label: 'Export-Q2',
      value: 40
    },
    {
      label: 'Export-Q3',
      value: 15
    },
    {
      label: 'Export-Q4',
      value: 65
    }
  ],
]

`rowLabels`, `columnLabels`

API: dataFormatter$
Description: Used to tag the array data within data$ for "rows" and "columns", each label corresponds to a set of array data (for more details on the data$ data structure, refer to the API documentation).
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next([
  [ 55, 80, 50, 11 ],
  [ 35, 40, 15, 65 ]
])
// dataFormatter$
chart.dataFormatter$.next({
  seriesDirection: 'row', // optional
  rowLabels: ['Import', 'Export'],
  columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC']
    }
  }
})

dataFormatter$'s rowLabels uses two labels to correspond to two sets of "row" array data:

'Import' -> [ 55, 80, 50, 11 ]

'Export' -> [ 35, 40, 15, 65 ]

A common use case is the legend - for example, GridLegend will draw these two labels with corresponding colors and names.

dataFormatter$'s columnLabels uses four labels to correspond to four sets of "column" array data:

'Q1' -> [ 55, 35 ]

'Q2' -> [ 80, 40 ]

'Q3' -> [ 50, 15 ]

'Q4' -> [ 11, 65 ]

A common use case is the axis - for example, GroupAxis will place the label text (Q1~Q4) on the X-axis tick marks.

chartParams$ sets a color palette in colors[type].label, corresponding to the seriesLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> Import

'#6794DC' -> Export

TIP

In the Grid data category, there is the concept of series and group data. By setting seriesDirection, you can set "row" or "column" as series, and the other will be group. The main purpose is to control the transposition of the drawing mapping rules through the seriesDirection setting.

Using the above example, if we set seriesDirection to column (default is row), after transposing the data structure, not only will the drawn chart change, but the color label rules will also correspond to the new labels:

'#67B7DC' -> Q1

'#6794DC' -> Q2

'#6771DC' -> Q3

'#8067DC' -> Q4

Note: In the original example, only two color labels were set. When there are not enough, the system will use default color label rules.

MultiGrid

The MultiGrid data category has three types of labels: label, rowLabels, and columnLabels.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions. The tagging method is the same as Grid (the data format itself is slightly different), please refer to the Grid chapter for details.

`rowLabels`, `columnLabels`

API: dataFormatter$
Description: Used to tag the array data within data$ for "rows" and "columns", each label corresponds to a set of array data (for more details on the data$ data structure, refer to the API documentation).
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next([
// First set of Grid data
  [
    [ 55, 80, 50, 11 ],
    [ 35, 40, 15, 65 ]
  ],
// Second set of Grid data
  [
    [ 6500, 7000, 9000, 11000 ],
    [ 2500, 4000, 2500, 7500 ]
  ]
])
// dataFormatter$
chart.dataFormatter$.next({
  gridList: [
    {
      seriesDirection: 'row', // optional
      rowLabels: ['Import Quantity', 'Export Quantity'],
      columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    {
      seriesDirection: 'row', // optional
      rowLabels: ['Import Amount', 'Export Amount'],
      columnLabels: ['Q1', 'Q2', 'Q3', 'Q4']
    }
  ]
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC']
    }
  }
})

dataFormatter$'s rowLabels uses a total of 4 labels to correspond to 4 sets of "row" array data:

'Import Quantity' -> [ 55, 80, 50, 11 ]

'Export Quantity' -> [ 35, 40, 15, 65 ]

'Import Amount' -> [ 6500, 7000, 9000, 11000, 8000 ]

'Export Amount' -> [ 2500, 4000, 2500, 7500, 9000 ]

A common use case is the legend - for example, MultiGridLegend will draw these labels with corresponding colors and names.

dataFormatter$'s columnLabels sets a total of 8 labels, but there is a special mechanism here. When the values of columnLabels are the same, they will be merged, so there will be 4 labels corresponding to 4 sets of "column" array data:

'Q1' -> [ 55, 35, 6500, 2500 ]

'Q2' -> [ 80, 40, 7000, 4000 ]

'Q3' -> [ 50, 15, 11000, 7500 ]

'Q4' -> [ 11, 65, 8000, 9000 ]

A common use case is the axis - for example, MultiGroupAxis will place the label text (Q1~Q4) on the X-axis tick marks.

chartParams$ sets a color palette in colors[type].label, corresponding to the seriesLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> 'Import Quantity'

'#6794DC' -> 'Export Quantity'

'#6771DC' -> 'Import Amount'

'#8067DC' -> 'Export Amount'

MultiValue

The MultiValue data category has two types of labels: label and categoryLabel.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions.
Example:

Format example of data$ before adding label:

[
  [ 25, 30, 15 ],
  [ 55, 60, 40 ],
  [ 45, 55, 30 ],
  [ 75, 35, 30 ],
  [ 65, 25, 5 ],
]

Example after adding label:

[
  {
    value: [ 25, 30, 15 ],
    label: 'Item 1'
  },
  {
    value: [ 55, 60, 40 ],
    label: 'Item 2'
  },
  {
    value: [ 45, 55, 30 ],
    label: 'Item 3'
  },
  {
    value: [ 75, 35, 30 ],
    label: 'Item 4'
  },
  {
    value: [ 65, 25, 5 ],
    label: 'Item 5'
  },
]

`categoryLabels`

API: data$
Description: Used to tag individual data points, allowing multiple data points to be tagged with the same label. Therefore, each label corresponds to a set of array data.
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next([
  {
    value: [ 25, 30, 15 ],
    label: 'Item 1',
    categoryLabel: 'People'
  },
  {
    value: [ 55, 60, 40 ],
    label: 'Item 2',
    categoryLabel: 'Keywords'
  },
  {
    value: [ 45, 55, 30 ],
    label: 'Item 3',
    categoryLabel: 'Brands'
  },
  {
    value: [ 75, 35, 30 ],
    label: 'Item 4',
    categoryLabel: 'Brands'
  },
  {
    value: [ 65, 25, 5 ],
    label: 'Item 5',
    categoryLabel: 'Keywords'
  },
])
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['Keywords', 'People', 'Brands']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})

categoryLabels must be tagged in two places: individually in the data$ data and in the dataFormatter$'s categoryLabels, which must include all used labels (the order of labels in dataFormatter$'s categoryLabels is determined by the array index).

The array data corresponding to the labels are as follows:

'Keywords' ->

  [
    {
      value: [ 55, 60, 40 ],
      label: 'Item 2',
      categoryLabel: 'Keywords'
    },
    {
      value: [ 65, 25, 5 ],
      label: 'Item 5',
      categoryLabel: 'Keywords'
    }
  ]

'People' ->

  [
    {
      value: [ 25, 30, 15 ],
      label: 'Item 1',
      categoryLabel: 'People'
    }
  ]

'Brands' ->

  [
    {
      value: [ 45, 55, 30 ],
      label: 'Item 3',
      categoryLabel: 'Brands'
    },
    {
      value: [ 75, 35, 30 ],
      label: 'Item 4',
      categoryLabel: 'Brands'
    }
  ]

A common use case is the legend - for example, MultiValueLegend will draw these three labels with corresponding colors and names.

chartParams$ sets a color palette in colors[type].label, corresponding to the categoryLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> Keywords

'#6794DC' -> People

'#6771DC' -> Brands

Relationship

The Relationship data category has two types of labels: label and categoryLabel.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions.
Example:

In the data$ data, label is optional. Example with label tags:

{
  nodes: [
    {
      id: "id0",
      label: "label0",
      value: 19800000,
      categoryLabel: "category1"
    },
    {
      id: "id3",
      label: "label1",
      value: 5114269,
      categoryLabel: "category1"
    },
    {
      id: "id4",
      label: "label2",
      value: 1093200,
      categoryLabel: "category1"
    },
    {
      id: "id5",
      label: "label3",
      value: 32007217,
      categoryLabel: "category1"
    }
  ],
  edges: [
    {
      id: "id14",
      label: "label8",
      categoryLabel: "category2",
      start: "id5",
      end: "id0",
      value: 100
    },
    {
      id: "id15",
      label: "",
      categoryLabel: "category2",
      start: "id5",
      end: "id3",
      value: 100
    },
    {
      id: "id16",
      label: "",
      categoryLabel: "category2",
      start: "id5",
      end: "id4",
      value: 50
    }
  ]
}

`categoryLabels`

API: data$
Description: Used to tag individual data points, allowing multiple data points to be tagged with the same label. Therefore, each label corresponds to a set of array data.
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next({
  nodes: [
    {
      id: "id0",
      label: "Company A",
      value: 19800000,
      categoryLabel: "Company"
    },
    {
      id: "id3",
      label: "Company B",
      value: 5114269,
      categoryLabel: "Company"
    },
    {
      id: "id4",
      label: "Company C",
      value: 1093200,
      categoryLabel: "Company"
    },
    {
      id: "id5",
      label: "Person A",
      value: 32007217,
      categoryLabel: "Director"
    }
  ],
  edges: [
    {
      id: "id14",
      label: "25%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id0",
      value: 0.25
    },
    {
      id: "id15",
      label: "5%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id3",
      value: 0.05
    },
    {
      id: "id16",
      label: "5%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id4",
      value: 0.05
    }
  ]
})
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['Company', 'Director', 'Shareholding']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})

categoryLabels must be tagged in two places: individually in the data$ data and in the dataFormatter$'s categoryLabels, which must include all used labels (the order of labels in dataFormatter$'s categoryLabels is determined by the array index).

The array data corresponding to the labels are as follows:

'Company' ->

  [
    {
      id: "id0",
      label: "Company A",
      value: 19800000,
      categoryLabel: "Company"
    },
    {
      id: "id3",
      label: "Company B",
      value: 5114269,
      categoryLabel: "Company"
    },
    {
      id: "id4",
      label: "Company C",
      value: 1093200,
      categoryLabel: "Company"
    },
  ]

'Director' ->

  [
    {
      id: "id5",
      label: "Person A",
      value: 32007217,
      categoryLabel: "Director"
    }
  ]

'Shareholding' ->

  [
    {
      id: "id14",
      label: "25%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id0",
      value: 0.25
    },
    {
      id: "id15",
      label: "5%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id3",
      value: 0.05
    },
    {
      id: "id16",
      label: "5%",
      categoryLabel: "Shareholding",
      start: "id5",
      end: "id4",
      value: 0.05
    }
  ]

A common use case is the legend - for example, RelationshipLegend will draw these three labels with corresponding colors and names.

chartParams$ sets a color palette in colors[type].label, corresponding to the categoryLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> Company

'#6794DC' -> Director

'#6771DC' -> Shareholding

Tree

The Tree data category has two types of labels: label and categoryLabel.

`label`

API: data$
Description: Used to tag individual data points, can be used as titles or descriptions.
Example:

In the data$ data, label is optional. Example with label tags:

{
  label: "Movies",
  children: [
    {
      label: "Action",
      children: [
        {
          label: "Avatar ",
          categoryLabel: "Action",
          value: "760505847",
          id: "Movies.Action.Avatar "
        },
        {
          label: "Jurassic World ",
          categoryLabel: "Action",
          value: "652177271",
          id: "Movies.Action.Jurassic World "
        },
        {
          label: "The Avengers ",
          categoryLabel: "Action",
          value: "623279547",
          id: "Movies.Action.The Avengers "
        }
      ],
      id: "Movies.Action"
    },
    {
      label: "Drama",
      children: [
        {
          label: "Titanic ",
          categoryLabel: "Drama",
          value: "658672302",
          id: "Movies.Drama.Titanic "
        },
        {
          label: "The Sixth Sense ",
          categoryLabel: "Drama",
          value: "293501675",
          id: "Movies.Drama.The Sixth Sense "
        }
      ],
      id: "Movies.Drama"
    },
    {
      label: "Adventure",
      children: [
        {
          label: "Shrek 2",
          categoryLabel: "Adventure",
          value: "436471036",
          id: "Movies.Adventure.Shrek 2"
        }
      ],
      id: "Movies.Adventure"
    }
  ],
  id: "Movies"
}

`categoryLabels`

API: data$
Description: Used to tag individual data points, allowing multiple data points to be tagged with the same label. Therefore, each label corresponds to a set of array data.
Example:

We use a set of data$, dataFormatter$, and chartParams$ settings to explain:

// data$
chart.data$.next({
  label: "Movies",
  children: [
    {
      label: "Action",
      children: [
        {
          label: "Avatar ",
          categoryLabel: "Action",
          value: "760505847",
          id: "Movies.Action.Avatar "
        },
        {
          label: "Jurassic World ",
          categoryLabel: "Action",
          value: "652177271",
          id: "Movies.Action.Jurassic World "
        },
        {
          label: "The Avengers ",
          categoryLabel: "Action",
          value: "623279547",
          id: "Movies.Action.The Avengers "
        }
      ],
      id: "Movies.Action"
    },
    {
      label: "Drama",
      children: [
        {
          label: "Titanic ",
          categoryLabel: "Drama",
          value: "658672302",
          id: "Movies.Drama.Titanic "
        },
        {
          label: "The Sixth Sense ",
          categoryLabel: "Drama",
          value: "293501675",
          id: "Movies.Drama.The Sixth Sense "
        }
      ],
      id: "Movies.Drama"
    },
    {
      label: "Adventure",
      children: [
        {
          label: "Shrek 2",
          categoryLabel: "Adventure",
          value: "436471036",
          id: "Movies.Adventure.Shrek 2"
        }
      ],
      id: "Movies.Adventure"
    }
  ],
  id: "Movies"
})
// dataFormatter$
chart.dataFormatter$.next({
  categoryLabels: ['Action', 'Drama', 'Adventure']
})
// chartParams$
chart.chartParams$.next({
  colors: {
    light: {
      label: ['#67B7DC', '#6794DC', '#6771DC']
    }
  }
})

categoryLabels must be tagged in two places: individually in the data$ data and in the dataFormatter$'s categoryLabels, which must include all used labels (the order of labels in dataFormatter$'s categoryLabels is determined by the array index).

The array data corresponding to the labels are as follows:

'Action' ->

  [
    {
      label: "Avatar ",
      categoryLabel: "Action",
      value: "760505847",
      id: "Movies.Action.Avatar "
    },
    {
      label: "Jurassic World ",
      categoryLabel: "Action",
      value: "652177271",
      id: "Movies.Action.Jurassic World "
    },
    {
      label: "The Avengers ",
      categoryLabel: "Action",
      value: "623279547",
      id: "Movies.Action.The Avengers "
    }
  ]

'Drama' ->

  [
    {
      label: "Titanic ",
      categoryLabel: "Drama",
      value: "658672302",
      id: "Movies.Drama.Titanic "
    },
    {
      label: "The Sixth Sense ",
      categoryLabel: "Drama",
      value: "293501675",
      id: "Movies.Drama.The Sixth Sense "
    }
  ]

'Adventure' ->

  [
    {
      label: "Shrek 2",
      categoryLabel: "Adventure",
      value: "436471036",
      id: "Movies.Adventure.Shrek 2"
    }
  ]

A common use case is the legend - for example, TreeLegend will draw these three labels with corresponding colors and names.

chartParams$ sets a color palette in colors[type].label, corresponding to the categoryLabels labels by index, determining the color of the graphical elements.

'#67B7DC' -> Action

'#6794DC' -> Drama

'#6771DC' -> Adventure