Tooltip Attribute

class Tooltip extends BaseAttribute

https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html

Tooltip inherits all the properties from BaseAttribute

API

Position Modes

Possible modes are:

• average mode will place the tooltip at the average position of the items displayed in the tooltip.
• nearest will place the tooltip at the position of the element closest to the event position.

Alignment

The titleAlign, bodyAlign and footerAlign options define the horizontal position of the text lines with respect to the tooltip box. The following values are supported.

• left (default)
• right
• center

These options are only applied to text lines. Color boxes are always aligned to the left edge.

Tooltip Item Interface

The tooltip items passed to the tooltip callbacks implement the following interface.

{
    // Label for the tooltip
    label: string,

    // Value for the tooltip
    value: string,

    // X Value of the tooltip
    // (deprecated) use `value` or `label` instead
    xLabel: number | string,

    // Y value of the tooltip
    // (deprecated) use `value` or `label` instead
    yLabel: number | string,

    // Index of the dataset the item comes from
    datasetIndex: number,

    // Index of this data item in the dataset
    index: number,

    // X position of matching point
    x: number,

    // Y position of matching point
    y: number
}

Tooltip Model

The tooltip model contains parameters that can be used to render the tooltip.

{
  // The items that we are rendering in the tooltip. See Tooltip Item Interface section
  dataPoints: TooltipItem[],

  // Positioning
  xPadding: number,
  yPadding: number,
  xAlign: string,
  yAlign: string,

  // X and Y properties are the top left of the tooltip
  x: number,
  y: number,
  width: number,
  height: number,
  // Where the tooltip points to
  caretX: number,
  caretY: number,

  // Body
  // The body lines that need to be rendered
  // Each object contains 3 parameters
  // before: string[] // lines of text before the line with the color square
  // lines: string[], // lines of text to render as the main item with color square
  // after: string[], // lines of text to render after the main lines
  body: object[],
  // lines of text that appear after the title but before the body
  beforeBody: string[],
  // line of text that appear after the body and before the footer
  afterBody: string[],
  bodyFontColor: Color,
  _bodyFontFamily: string,
  _bodyFontStyle: string,
  _bodyAlign: string,
  bodyFontSize: number,
  bodySpacing: number,

  // Title
  // lines of text that form the title
  title: string[],
  titleFontColor: Color,
  _titleFontFamily: string,
  _titleFontStyle: string,
  titleFontSize: number,
  _titleAlign: string,
  titleSpacing: number,
  titleMarginBottom: number,

  // Footer
  // lines of text that form the footer
  footer: string[],
  footerFontColor: Color,
  _footerFontFamily: string,
  _footerFontStyle: string,
  footerFontSize: number,
  _footerAlign: string,
  footerSpacing: number,
  footerMarginTop: number,

  // Appearance
  caretSize: number,
  caretPadding: number,
  cornerRadius: number,
  backgroundColor: Color,

  // colors to render for each item in body[]. This is the color of the squares in the tooltip
  labelColors: Color[],
  labelTextColors: Color[],

  // 0 opacity is a hidden tooltip
  opacity: number,
  legendColorBackground: Color,
  displayColors: boolean,
  borderColor: Color,
  borderWidth: number
}

Usage

<c-chart>
  <c-tooltip
    titlealign="left"
    footerfontcolor="#CC4"
  >
  </c-tooltip>
</c-chart>