Search code examples
powerbivisualizationvega-litevegadeneb

Creating a Date Slider for Vega-Lite Plot in Deneb

I'm working with Vega-Lite (Deneb) to create a line plot, and I need to incorporate a date slider to interactively filter the data displayed on the plot. I have the following plot code that visualizes stock data over time. However, I'm unsure how to implement a date slider to allow users to dynamically adjust the date range displayed on the plot. Here's my current plot code:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "title": {"text": {"expr": "data('dataset')[0]['title']"}},
  "mark": "line",
  "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Sum of Price", "type": "quantitative", "title": "Price"},
    "color": {
      "field": "Ticker",
      "type": "nominal",
      "scale": {
        "range": {"field": "Colour"}
      }
    },
    "strokeWidth": {"value": 2}
  },
  "config": {
    "view": {"stroke": "transparent"}
  }
}

An example of my desired output is

Example

or even something textual like

example 2

Thanks in advance.

*Edit My pages each have multiple plots, so while Davids answer is correct, I'm looking for a solution that does not require placing and configuring multiple slicers.

Solution

  • Just add a native PowerBI slicer with your date field. This will filter the data that is supplied to Deneb.

    enter image description here