Custom DataSource, set label for returned MutableDataFrame

I have a simple custom Grafana data source. The data source calls backend and returns MutableDataFrame:

      return new MutableDataFrame({
        refId: query.refId,
        fields: [
          { name: 'time', type: FieldType.time, values: times },
          { name: 'value', type: FieldType.number, values: values },
        ],
      });

The values returned by the data source are plotted on a chart, and they have value label on the graph. I would like to change the value string to a custom label, but I cannot find how do it.

Related:

Hi,

We have deprecated MutableDataFrame (pull request), you should be able to just use DataFrame instead.

You should be able to do this with field overrides. In the panel options on the right add a field override, in the “Fields with name” select “value”, then after clicking on “Add override property” select “Standard options → Display name” and set a custom label.

I hope this helps, please let us know if it doesn’t or if you have further questions.

Thanks @leventebalogh for response! I appreciate.

I am interested in changing the “display name” from the data source itself. Assume that the data source returns some metrics per city. I would like the user to query metrics for, say, New York, and I would like the default label to be “New York” instead of “value”. Is that possible?

you can include another field in the dataframe called “display” to give a metric a hint on how to display it:

fields: [
          { name: 'time', type: FieldType.time, values: times },
          { display: 'Friendly Value', name: 'value', type: FieldType.number, values: values },
        ],
1 Like

Thanks @bkgann ! Turned out that the solution was config.displayName:

 return new MutableDataFrame({
        refId: query.refId,
        fields: [
          { name: 'time', type: FieldType.time, values: times },
          {
            name: 'value',
            type: FieldType.number,
            values: values,
            config: { displayName },
          },
        ],
      });