Highlights

Chart Tutorials  

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 });
}