Deneb Template - Line Chart with Hover Highlight

One of the interactive features built-in to the Vega-Lite language is the ability to highlight a category by detecting the mouse location (using its hover position). A line chart can be used to effectively illustrate this feature, and I enclose a Deneb/Vega-Lite template for such a line chart.

This template illustrates a number of Deneb/Vega-Lite features, including:

  • a temporal X-axis with label formatting using Deneb’s ability to access Power BI formatting strings
  • a quantitative Y-axis with approximate tick count
  • automatic assignment of country colours based on Deneb v1.1’s ability to access the current Power BI colour theme
  • automatic turning of all non-selected countries lines to “grey” (i.e., those countries that are not currently hovered-over)
  • a layered “circle” and “text” mark at the right-side of each line denoting the category (country)

The intent of this template is not to provide a finished visual, but rather to serve as a starting point for further custom visual development.

Also included is the sample PBIX using the Enterprise DNA Practice Dataset as a demo.

NOTE: This template is provided as-is for information purposes only, and its use is solely at the discretion of the end user; no responsibility is assumed by the author.

EDIT: resolved Deneb v1.1 template generation issue and uploaded new template version

Greg
deneb.line_chart_with_hover_highlight.0.3.json (3.4 KB)
Deneb Templates - Line Chart with Hover Highlight.pbix (1.7 MB)

2 Likes

Marking as solved.

Is there a way to to activate tool tip on this so when you hover over a point you can see the value or maybe data from a tooltip page?

Hi @ToddFetcho. Yes, no problem … just add a “tooltip”: true key-value pair to the first line mark.

Hope this helps.
Greg
Deneb Templates - Line Chart with Hover Highlight - V2.pbix (1.7 MB)