Skip to main content

Highlights

Highlights on the visual allow showing sections of data related to selected data points in other visuals.

Highlights

To create such visualization in the PlotlyJS Visual, the visual provides highlighted values as a regular column of the table:

Highlights

The values of those columns always are less than the values of the corresponding un-highlighted columns.

To add highlights for charts, you need to enable the property in the visual settings:

Highlights columns property

Then create the second bars behind and assign different columns (highlight and values columns) for them.

Click on “+ Trace” to add a new trace to the chart:

Add trace button

New trace:

Add the new trace

Assign Country and Segment columns to X axis. Assign Sales (Highlights) to Y axis.

After that, you will have a chart with new columns:

The chart with two bars

Change the opacity of the first trace in the styles section:

Opacity property

Those bars will be behind the chart to visualize the un-highlighted values.

Add the new X axis for the second trace (Name is trace 1) in the Trace tab of the editor in the Axes to Use panel:

The new axis

After that, the chart shifts the trace 1 to the foreground and adds the second X axis on top:

Shift trace 1

We don’t need the second X axis (xaxis2) for hiding it, you just need to set false for the “visible” property in the JSON editor:

Hide axis

It almost ready — you can save and interact with other visuals in the Power BI report to see the result:

Intermediate result

The final part is color — you need to set the same color for the second trace too in the “Styles” tab:

Apply styles

Hide the legend, as we don’t need it here for single trace:

Hide the legend