How do we actually register a customised formatter in react vega?

Question

I have read the documentation so many times https://vega.github.io/vega-lite/docs/config.html#custom-format-type. I still don't understand how to implement this in react vega. What confuses me the most is this vega object.

view = new vega.View(...);
view.expressionFunction('customFormatA', function(datum, params) {
  ...
  return "<formatted string>";
});

What I am currently doing in React:

import React from "react";
import ReactDOM from "react-dom";
import { createClassFromSpec } from "react-vega";

const spec = {}

const BarChart = createClassFromSpec({ mode: "vega-lite", spec: spec });

export default function TestPage2({ data }) {
  return <BarChart data={{ table: data }} />;
}

Is there any example of implementing a custom format type that I can learn from?

Answer 1

There was an error in the documentation and a pull request has been submitted.

You should use vega instead of vega.View like so:

import { expressionFunction } from 'vega';
expressionFunction('customFormatA', function(datum, params) {
  return datum;
});

However, note that custom formats do not work with binning; an issue has been opened for this.