Plot is not refreshed on variable change

[denglerchr]

Im using your great panel, but am having an inconvenience. Basically I use several variables in the code to change the look of the graph.
However, on changing the variable, the graph is not refreshing, unless I also refresh the dashboard. Attached an example based on the default code in the panel, I just added a "MyTitle" variable.
Upon changing the MyTitle variable, the title isnt updated. Only upon refreshing the dashboard, the title is finally updating. It would be nice, if it updates immediately.

const series = context.panel.data.series.map((s) => {
  const sData = s.fields.find((f) => f.type === 'number').values.buffer || s.fields.find((f) => f.type === 'number').values;
  const sTime = s.fields.find((f) => f.type === 'time').values.buffer || s.fields.find((f) => f.type === 'time').values;

  return {
    name: s.refId,
    type: 'line',
    showSymbol: false,
    areaStyle: {
      opacity: 0.1,
    },
    lineStyle: {
      width: 1,
    },
    data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
  };
});

/**
 * Enable Data Zoom by default
 */
setTimeout(() => context.panel.chart.dispatchAction({
  type: 'takeGlobalCursor',
  key: 'dataZoomSelect',
  dataZoomSelectActive: true,
}), 500);

/**
 * Update Time Range on Zoom
 */
context.panel.chart.on('datazoom', function (params) {
  const startValue = params.batch[0]?.startValue;
  const endValue = params.batch[0]?.endValue;
  locationService.partial({ from: startValue, to: endValue });
});

return {
  title: { text: context.grafana.replaceVariables('${MyTitle}') }, //small change from default code
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    left: '0',
    bottom: '0',
    data: context.panel.data.series.map((s) => s.refId),
    textStyle: {
      color: 'rgba(128, 128, 128, .9)',
    },
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none',
        icon: {
          zoom: 'path://',
          back: 'path://',
        },
      },
      saveAsImage: {},
    }
  },
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
    min: 'dataMin',
  },
  grid: {
    left: '2%',
    right: '2%',
    top: '2%',
    bottom: 24,
    containLabel: true,
  },
  series,
};

[vitPinchuk]

@denglerchr Thank you for your question.

A possible solution could be adding a new simple query that will track the variable's value.

Every time the value of a variable changes - this will trigger a data change and a panel change

But in that case, you can use the value directly from the data.

const title = context.panel.data.series.find(s => s.name === 'Variable').fields[0].values[0]
const options = {
  title: { text: title },

Let me know if this is a workable solution for you

[mikhail-vl]

@denglerchr As Vitali replied, because of the multiple optimizations in the Grafana v11 dashboards, variable updates don't trigger panel rerenders.

One of the solutions is to use variable in the data source which will cause panel to rerender.

[denglerchr]

Hello together, yes your solution worked fine, thanks! I used the testdata datasource and entered my variables there, now the refresh works.

[leeoniya]

As Vitali replied, because of the multiple optimizations in the Grafana v11 dashboards, variable updates don't trigger panel rerenders.

this will change soon :)

we're going to add universal variable interpolation to all panel options and fieldConfig the same way we just did transforms: grafana/grafana#100225

[mikhail-vl]

@denglerchr Thank you for confirming.