Format an Secondary Line Independently on a Line Chart
Summary: Alina Malynovska provides a detailed guide on how to format a secondary line independently on a line chart using a widget script. The script allows users to style a specific series with a dashed line, no value labels, and a slimmer line weight, differentiating it from the main series. Key steps include editing the widget script, setting the series name accurately, and testing customizations on a copy of the widget. The instructions emphasize careful matching of the series name and provide tips for further customization and testing.
Introduction
A common request is to overlay an secondary line (e.g. average reference series) on a line chart and style it differently from the main series — for example, make it dashed, thinner, and without value labels so it reads as a subtle reference rather than a primary trend. The challenge: the widget Design panel applies line styling (line width, value labels, line type) to all series at once. There is no built-in way to format a single series independently from the panel. This article shows a short widget script that targets one series by name and formats only that series, leaving the main line untouched.
Prerequisites
A line chart (or line/column) widget with two or more series — e.g. your main measure plus an average measure such as
avg([Weeks in CreatedDate], [# of unique UniqueNumbers]).Edit rights on the dashboard/widget.
Before Script:
After Script:
Steps
Open the widget, then select the widget menu (three dots) → Edit Script.
Paste the script below.
// Format one series independently on a line chart:
// dashed line, no value labels, and a slimmer line weight.
// Set the string below to the EXACT title of the series to restyle.
var averageSeriesName = "avg [# of unique UniqueNumbers]";
widget.on("beforeviewloaded", function (widget, args) {
args.options.series.forEach(function (s) {
if (s.name === averageSeriesName) {
s.dashStyle = "Dash"; // dashed line
s.dataLabels = { enabled: false }; // hide value labels on this series only
s.lineWidth = 1; // slimmer line (higher number = thicker)
}
});
});Set the
averageSeriesNamevariable to the exact title of the series you want to restyle — copy it character-for-character from the legend or from the tooltip that appears when you hover the line (including any prefix such asavg). This is the single most important step: if the name does not match
exactly, nothing changes.
Click Apply, then Save the dashboard and refresh the widget.
Customization
To restyle by position instead of by name, replace the
if (s.name === …)test with an index check, e.g.args.options.series.forEach(function (s, i) { if (i === 1) { … } })where1is the second series.To emphasize the main line instead of thinning the average, target the main series name and give it a higher
lineWidth.
Notes
The Design panel's Line Width control (Thin / Bold / Thick) can override the script's
lineWidthwhen the widget re-renders. If the width does not hold, set the panel width for the main line and let the script handle only the secondary series.Widget scripts are an unsupported, "as-is" customization. Test on a copy of the widget first, and re-validate after Sisense version upgrades.
Result
The main series keeps its normal styling, while the average/reference series appears as a slim, dashed line with no value labels — a clean visual reference across the chart.
