Highlights

Highlights usage on calendar charts.

Introduction

Calendar highlights can be used to outline or highlight specific calendar patterns. Highlight fills render behind cells while their outlines render on top. With year view calendar, a highlight is automatically added to outline each month. Using highlights through the FP API can also get a list of cells (points) that are part of the highlight.

{
  highlights: [{ pattern: { month: "*" }, outline: { color: "black", width: 1 } }]
}

For more information, see the Calendar Patterns Tutorial.

Highlights points with or without data

Highlights will detect whether any data exists within the cells outlined by the shape and apply a modification to empty highlight styling. This modification can be specified with code such as this default modification:

{
  pattern: { month: "*" },
  outline: { color: "black", width: 1 },
  empty: { outline_opacity: 0.3 }
}

Real-time Highlights

Highlights can also be added and removed in real-time through the FP API.

{
  //Add highlight
  chart.highlights.add({ id: "myHL", pattern: { month: "*" }, outline: { color: "black", width: 1 } });

  //Modify
  chart.highlights("myHL").options({ outline_width: 2 });

  //Remove
  chart.highlights("myHL").remove();

  //Modify cells (points) that match the pattern of this highlight.
  chart
    .highlights("myHL")
    .items()
    .options({ outline_width: 2 });
}