1"use strict";(self.webpackChunkholistics_docs=self.webpackChunkholistics_docs||[]).push([["16519"],{40337(e,n,t){t.r(n),t.d(n,{metadata:()=>s,default:()=>d,frontMatter:()=>l,contentTitle:()=>o,toc:()=>a,assets:()=>c});var s=JSON.parse('{"id":"guides/create-interactive-custom-charts","title":"Make a custom chart interactive","description":"Add cross-filtering, drill-through, and highlight effects to custom charts using Vega-Lite point and interval selections, with copy-ready code examples.","source":"@site/docs/guides/create-interactive-custom-charts.md","sourceDirName":"guides","slug":"/guides/create-interactive-custom-charts","permalink":"/guides/create-interactive-custom-charts","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Make a custom chart interactive","description":"Add cross-filtering, drill-through, and highlight effects to custom charts using Vega-Lite point and interval selections, with copy-ready code examples.","sidebar_label":"Make a Custom Chart Interactive","slug":"/guides/create-interactive-custom-charts"},"sidebar":"visualizations","previous":{"title":"Make a Custom Chart Responsive","permalink":"/guides/make-custom-chart-responsive"},"next":{"title":"Create a Custom Chart (Video Walkthrough)","permalink":"/guides/create-custom-chart-video"}}'),i=t(74848),r=t(28453);let l={title:"Make a custom chart interactive",description:"Add cross-filtering, drill-through, and highlight effects to custom charts using Vega-Lite point and interval selections, with copy-ready code examples.",sidebar_label:"Make a Custom Chart Interactive",slug:"/guides/create-interactive-custom-charts"},o,c={},a=[{value:"How interactions work",id:"how-interactions-work",level:2},{value:"Selections",id:"selections",level:3},{value:"<code>holisticsConfig</code>",id:"holisticsconfig",level:3},{value:"Interaction examples",id:"interaction-examples",level:2},{value:"Highlight selected columns on point selection",id:"highlight-selected-columns-on-point-selection",level:3},{value:"Cross-filter on point selection",id:"cross-filter-on-point-selection",level:3},{value:"Cross-filter on interval selection",id:"cross-filter-on-interval-selection",level:3},{value:"Cross-filter all sub-charts in a combo chart",id:"cross-filter-all-sub-charts-in-a-combo-chart",level:3},{value:"Open the context menu on point selection",id:"open-the-context-menu-on-point-selection",level:3},{value:"Drill-through",id:"drill-through",level:4},{value:"Date-drill",id:"date-drill",level:4},{value:"View underlying data",id:"view-underlying-data",level:4}];function h(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{VideoPlayer:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("VideoPlayer",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.admonition,{title:"Knowledge Checkpoint",type:"tip",children:[(0,i.jsx)(n.p,{children:"A grasp of these concepts will help you understand this documentation better:"}),(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/docs/charts/understand-custom-chart",children:"Understand Custom Chart Definition"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/reference/aml/custom-chart",children:"AML Custom Chart Reference"})}),"\n"]})]}),"\n",(0,i.jsx)(n.p,{children:"Custom charts can support the same interactions as Holistics's built-in charts:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/docs/cross-filtering",children:"Cross-filtering"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/docs/interactions/date-drills",children:"Date drills"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/docs/interactions/drill-through",children:"Drill-through"})}),"\n",(0,i.jsx)(n.li,{children:(0,i.jsx)(n.a,{href:"/docs/interactions/view-underlying-data",children:"View underlying data"})}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"how-interactions-work",children:"How interactions work"}),"\n",(0,i.jsx)(n.p,{children:"Enabling an interaction takes two steps:"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Declare what your chart accepts, in ",(0,i.jsx)(n.strong,{children:"Selections"})]}),"\n",(0,i.jsxs)(n.li,{children:["Wire it to a Holistics feature, via ",(0,i.jsx)(n.code,{children:"holisticsConfig"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"selections",children:"Selections"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Selections"})," declare what a user can do, such as clicking a data point or dragging to select a range. You define them with Vega-Lite ",(0,i.jsx)(n.a,{href:"/reference/aml/custom-c
1hart#params",children:(0,i.jsx)(n.code,{children:"params"})}),". Vega-Lite calls a selection a ",(0,i.jsx)(n.em,{children:"signal"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"A selection is either point-based or interval-based."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Point selection (click)."})," A point selection fires when a user clicks a single value (left click), or selects several values (hold Shift and left click). To deselect, the user clicks a selected value again. Read more in the ",(0,i.jsx)(n.a,{href:"https://vega.github.io/vega-lite/docs/parameter.html#select",children:"Vega-Lite selection docs"}),"."]}),"\n",(0,i.jsx)("img",{alt:"Point selection highlighting a value on a bar chart",title:"Point selection",src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/01.png",width:"500",height:"350",style:{display:"block",margin:"0 auto"}}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Interval selection (drag)."})," An interval selection fires when a user holds left click and drags across a range of values. To deselect, the user double-clicks anywhere on the chart."]}),"\n",(0,i.jsx)(t,{src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/01.mp4"}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"holisticsconfig",children:(0,i.jsx)(n.code,{children:"holisticsConfig"})}),"\n",(0,i.jsx)(n.p,{children:"This property wires those selections to Holistics features."}),"\n",(0,i.jsx)(n.p,{children:"Two fields matter:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"crossFilterSignals"}),": selections that trigger ",(0,i.jsx)(n.a,{href:"/docs/cross-filtering",children:"Cross Filter"})," on ",(0,i.jsx)(n.strong,{children:"click"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"contextMenuSignals"}),": selections that open the context menu (",(0,i.jsx)(n.a,{href:"/docs/interactions/date-drills",children:"Date-drill"}),", ",(0,i.jsx)(n.a,{href:"/docs/interactions/drill-through",children:"Drill-through"}),", ",(0,i.jsx)(n.a,{href:"/docs/interactions/view-underlying-data",children:"View underlying data"}),") on ",(0,i.jsx)(n.strong,{children:"right-click"}),". Use a ",(0,i.jsx)(n.strong,{children:"hover"})," selection here so the menu targets the point under the cursor."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["For the full property reference, see ",(0,i.jsx)(n.a,{href:"/reference/aml/custom-chart#holisticsconfig",children:(0,i.jsx)(n.code,{children:"holisticsConfig"})})," and ",(0,i.jsx)(n.a,{href:"/reference/aml/custom-chart#params",children:(0,i.jsx)(n.code,{children:"params"})}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"interaction-examples",children:"Interaction examples"}),"\n",(0,i.jsxs)(n.p,{children:["Each example below starts from a working chart and adds one interaction. The full, copy-ready code for each one lives in the ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/tree/main/interactive_features",children:"Custom Chart Library"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"highlight-selected-columns-on-point-selection",children:"Highlight selected columns on point selection"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," When a user selects one or more columns, those columns stay fully visible while the rest fade out. On hover, a stroke outlines the column."]}),"\n",(0,i.jsx)(t,{src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/outcome1.mp4"}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["In your template, declare two point selections in ",(0,i.jsx)(n.code,{children:"params"}),": one that fires on click, and one that fires on hover."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "params": [\n // effective only while the user hovers\n { "name": "pointSelectionOnMouseOver", "select": {"type": "point", "on": "mouseover"} },\n // effective when the user clicks\n { "name": "normalPointSelection", "select": "point" }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"fillOpacity"})," rule so selected columns keep full opacity while the rest fade."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "mark": {\n "fill": "#484848" // base color of the columns\n },\n "encoding": {\n "fillOpacity": {\n // selected columns stay fully visible\n "condition": {"param": "normalPointSelection", "value": 1},\n // unselected columns fade to 30%\n "value": 0.3\n }\n }\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Try it. Click a single column, then select a range by holding Shift and clicking. The selected columns should stay highlighted."}
1),"\n",(0,i.jsx)("img",{alt:"Selected columns highlighted while the others fade out",title:"Highlighted selection",src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/first-milestone.png",width:"2276",height:"948"}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"strokeWidth"})," rule so hovered columns get a light stroke and selected columns get a bolder one."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "mark": {\n "fill": "#484848",\n "stroke": "black" // stroke color\n },\n "encoding": {\n "strokeWidth": {\n "condition": [\n // bolder stroke (2) on selected columns\n { "param": "normalPointSelection", "empty": false, "value": 2 },\n // light stroke (1) on hovered columns\n { "param": "pointSelectionOnMouseOver", "empty": false, "value": 1 }\n ],\n "value": 0 // no stroke by default\n }\n }\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Try selecting and hovering again. You should see a light stroke on hovered columns and a bolder stroke on selected ones."}),"\n",(0,i.jsx)("img",{alt:"Light stroke on hovered columns and a bolder stroke on selected columns",title:"Hover and selection strokes",src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/second-milestone.png",width:"2286",height:"1178"}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Full code example:"})," ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/blob/main/interactive_features/highlight_stroke_effect_on_point_selection.md",children:"Highlight stroke effect on point selection"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"cross-filter-on-point-selection",children:"Cross-filter on point selection"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," When a user selects data on your chart, a cross filter for that selection is applied to every widget in the dashboard."]}),"\n",(0,i.jsx)(t,{src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/outcome2.mp4"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," a chart with a point selection declared. The ",(0,i.jsx)(n.a,{href:"#highlight-selected-columns-on-point-selection",children:"highlight example"})," above is a good starting point."]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["In your template, declare a point selection in ",(0,i.jsx)(n.code,{children:"params"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "params": [\n // effective when the user clicks\n { "name": "normalPointSelection", "select": "point" }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"holisticsConfig"})," field with ",(0,i.jsx)(n.code,{children:"crossFilterSignals"}),", and list the point selection from step 1."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "holisticsConfig": {\n "crossFilterSignals": ["normalPointSelection"]\n }\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Try it. Click a single column, or select a range with Shift and click. A cross filter should be created and applied to the other reports in your dashboard."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Full code example:"})," ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/blob/main/interactive_features/cross_filter_on_point_selection.md",children:"Cross Filter on point selection"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"cross-filter-on-interval-selection",children:"Cross-filter on interval selection"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," When a user drags to select an interval on your chart, a cross filter for that range is applied to every widget in the dashboard."]}
1),"\n",(0,i.jsx)(t,{src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/outcome3.mp4"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," a working custom chart you can add a selection to."]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["In your template, declare an interval selection in ",(0,i.jsx)(n.code,{children:"params"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "params": [\n {\n "name": "intervalSelection",\n "select": {"type": "interval", "encodings": ["x"]}\n }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"holisticsConfig"})," field with ",(0,i.jsx)(n.code,{children:"crossFilterSignals"}),", and list the interval selection from step 1."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "holisticsConfig": {\n "crossFilterSignals": ["intervalSelection"]\n }\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Try it. Hold left click and drag across a range of values. A cross filter should be created and applied to the other reports in your dashboard."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Full code example:"})," ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/blob/main/interactive_features/cross_filter_on_interval_selection.md",children:"Cross Filter on interval selection"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"cross-filter-all-sub-charts-in-a-combo-chart",children:"Cross-filter all sub-charts in a combo chart"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," A selection on a combo (mixed) chart applies the cross filter to every sub-chart in the layer, not just the one the user interacted with."]}),"\n",(0,i.jsx)(t,{src:"https://cdn.holistics.io/docs/custom-chart/interactive-charts/outcome5.mp4"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," a combo chart built with a Vega-Lite ",(0,i.jsx)(n.code,{children:"layer"}),". See ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/blob/main/interactive_features/cross_filter_on_subcharts_combo_chart.md",children:"Cross Filter on sub-charts in a combo chart"})," for how to build one."]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["In your template, find the sub-chart in the ",(0,i.jsx)(n.code,{children:"layer"})," array that the cross filter should also apply to."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "layer": [\n // your bar chart definition\n { ... },\n // your line chart definition (the one we\'ll filter)\n { ... }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"transform"})," to that sub-chart with a ",(0,i.jsx)(n.code,{children:"filter"})," that takes the user's selection as its ",(0,i.jsx)(n.code,{children:"param"}),"."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "layer": [\n { ... }, // your bar chart definition\n {\n "transform": [\n // filter this sub-chart by the user\'s interval selection\n { "filter": {"param": "intervalSelection"} }\n ]\n // ...the rest of the sub-chart definition\n }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"Create a cross filter on your dashboard and confirm the sub-chart updates along with the rest."}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Full code example:"})," ",(0,i.jsx)(n.a,{href:"https://github.com/holistics/custom-chart-library/blob/main/interactive_features/cross_filter_on_subcharts_combo_chart.md",children:"Cross Filter on sub-charts in a combo chart"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"open-the-context-menu-on-point-selection",children:"Open the context menu on point selection"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," a chart you can add a selection to (see the ",(0,i.jsx)(n.a,{href:"#cross-filter-on-point-selection",children:"cross-filter example"}),")."]}),"\n",(0,i.jsxs)(n.p,{children:["The context menu opens on ",(0,i.jsx)(n.strong,{children:"right-click"}),", so it must read the point currently under the cursor. That means it needs a ",(0,i.jsx)(n.strong,{children:"hover"})," selection, not the click selection you use for Cross Filter. (A click selection has no target on right-click unless the user left-clicks the point first, which would also cross-filter.)"]}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["In your template, declare a ",(0,i.jsx)(n.strong,{children:"hover"})," point selection in ",(0,i.jsx)(n.code,{children:"params"}),". The ",(0,i.jsx)(n.code,{children:'"on": "mouseover"'})," trigger makes it track whichever point the cursor is over."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "params": [\n { "name": "hoverPointSelection", "select": {"type": "point", "on": "mouseover", "clear": "mouseout"} }\n ]\n ...\n}\n'})}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsxs)(n.p,{children:["Add a ",(0,i.jsx)(n.code,{children:"holisticsConfig"})," field with ",(0,i.jsx)(n.code,{children:"contextMenuSignals"}),", and list the hover selection from step 1."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "holisticsConfig": {\n "contextMenuSignals": ["hoverPointSelection"]\n }\n ...\n}\n'})}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Steps 1\u20132 wire up the whole context menu at once, so every option below needs them. What each option needs on top of that:"}),"\n",(0,i.jsx)(n.h4,{id:"drill-through",children:"Drill-through"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," Right-clicking a data point opens ",(0,i.jsx)(n.strong,{children:"Drill-through"})," in the context menu."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," at least one dimension field. ",(0,i.jsx)(n.a,{href:"/docs/interactions/drill-through",children:"Drill-through"})," passes dimension values as filters to the target dashboard, so a chart with no dimensions has nothing to drill with."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Additional setup:"})," none."]}),"\n",(0,i.jsx)(n.h4,{id:"date-drill",children:"Date-drill"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," Right-clicking a data point opens ",(0,i.jsx)(n.strong,{children:"Date-drill"})," in the context menu."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," a date or datetime dimension field. ",(0,i.jsx)(n.a,{href:"/docs/interactions/date-drills",children:"Date-drill"})," changes the time granularity of that field, so the chart needs a date field to drill on."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Additional setup:"})," none."]}),"\n",(0,i.jsx)(n.h4,{id:"view-underlying-data",children:"View underlying data"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Outcome."})," The context menu's ",(0,i.jsx)(n.strong,{children:"View underlying data"})," option resolves the full data row behind the point you right-clicked."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Prerequisite:"})," none beyond steps 1\u20132 above."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Additional setup:"})," widen the selection's ",(0,i.jsx)(n.code,{children:"fields"})," array to include at least 1 measure/metric and 1 dimension. Otherwise Holistics can't resolve the full underlying row:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-aml",children:'template: @vgl {\n ...\n "params": [\n {\n "name": "hoverPointSelection",\n "select": {\n "type": "point",\n "fields": [@{fields.category.name}, @{fields.value.name}], // include the metric field\n "on": "mouseover",\n "clear": "mouseout"\n }\n }\n ]\n ...\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["If that selection is already scoped to one field for another purpose and you don't want to widen it, declare a second selection with the full field list instead, and list both signal names in ",(0,i.jsx)(n.code,{children:"contextMenuSignals"}),"."]})]})}function d(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},28453(e,n,t){t.d(n,{R:()=>l,x:()=>o});var s=t(96540);let i={},r=s.createContext(i);function l(e){let n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:l(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.