Integrating AntV F2 Charts into DingTalk Mini‑Programs with Taro+React

Introduction

Guming franchisees need a visual tool to display store performance; DingTalk mini‑programs are used, built with Taro + React.

Visualization library selection

Popular options include ECharts, Chart.js, D3.js, AntV. For DingTalk mini‑programs the criteria are mobile, mini‑program, gesture interaction.

ECharts: rich but large (~1000k, too big for 2 MB package).

Chart.js: depends on DOM API, not supported.

D3.js: uses SVG, not supported.

AntV/F2: lightweight, mobile‑focused, works in H5 and mini‑programs.

Thus F2 is the preferred choice. Use version 4.x (latest) for full features.

Using F2 4.x in Taro + React

F2 docs show React integration but not Taro; we follow the React tutorial.

Create Taro + React project

Follow Taro docs to create a React project and add DingTalk mini‑program compilation.

Install F2 dependencies

<code>npm install @antv/f2 --save
npm install @antv/f2-react --save</code>

Copy F2 demo into index file

<code>import Canvas from '@antv/f2-react';
import { Chart, Interval } from '@antv/f2';

const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

export default () => <Canvas>
  <Chart data={data}>
    <Interval x='genre' y='sold' />
  </Chart>
</Canvas>;
</code>

Run code and encounter canvas error

Execution shows an error in DingTalk console.

Create canvas drawing context

Modify ReactCanvas to use

dd.createCanvasContext(canvasId)

instead of DOM canvas.

<code>class ReactCanvas extends React.Component&lt;CanvasProps&gt; {
  getProps = () => {
    const { canvasRef, props } = this;
    const context = Taro.createCanvasContext(props.id ?? 'canvasId');
  };
  render: () => {
    const { props } = this;
    return React.createElement(TaroCanvas, {
      id: props.id ?? 'f2Canvas',
    });
  }
}
</code>

After adjustment the chart renders but appears only a tiny shape.

Set canvas width and height

Since mini‑programs cannot get element size via DOM, manually obtain size and pass to F2.

<code>// Adjust ReactCanvas to fetch width/height
class ReactCanvas extends React.Component&lt;CanvasProps&gt; {
  renderOrUpdateCanvas = async (type) => {
    const canvasId = props.id ?? 'f2Canvas';
    const { width, height } = await getWidthAndHeight(canvasId);
    return { width, height };
  };
  componentDidMount() {
    nextTick(() => {
      this.renderOrUpdateCanvas("init");
    });
  }
}
</code>

Bar chart now displays correctly.

Improve pixel ratio for clarity

Configure

pixelRatio

using device info to avoid blurry charts.

<code>class ReactCanvas extends React.Component&lt;CanvasProps&gt; {
  pixelRatio: number;
  renderOrUpdateCanvas = async (type) => {
    const config = {
      pixelRatio: this.pixelRatio,
      ...props,
    };
  };
  componentDidMount() {
    this.pixelRatio = Taro.getSystemInfoSync().pixelRatio;
    nextTick(() => {
      this.renderOrUpdateCanvas("init");
    });
  }
}
</code>

Initial attempt caused data to disappear; after adjusting canvas size with pixelRatio the chart renders sharply.

Patch canvas context differences

Wrap the mini‑program context with

@antv/f2-context

to provide a standard CanvasRenderingContext2D interface.

<code>import { my } from '@antv/f2-context';
class ReactCanvas extends React.Component&lt;CanvasProps&gt; {
  renderCanvas = async () => {
    const context = my(Taro.createCanvasContext(canvasId));
    return { context };
  };
  componentDidUpdate() {
    this.renderCanvas();
  }
}
</code>

Chart and axes now display fully.

Event propagation

Tooltips work but events were not triggered.

Forward touch events from the canvas to F2.

<code>function wrapEvent(e) {
  if (e && !e.preventDefault) {
    e.preventDefault = function () {};
  }
  return e;
}
class ReactCanvas extends React.Component&lt;CanvasProps&gt; {
  handleTouchStart = (e) => {
    const canvasEl = this.canvasEl;
    if (!canvasEl) return;
    canvasEl.dispatchEvent('touchstart', wrapEvent(e));
  };
  render() {
    return React.createElement(TaroCanvas, {
      onTouchStart: this.handleTouchStart,
    });
  }
}
</code>

Tooltip now shows correctly.

Summary of challenges

Canvas context acquisition differs from web.

Manual width/height retrieval required.

Pixel‑ratio causes blur.

Mini‑program context is not standard; needs patch.

Event handling must be explicitly defined.

Existing open‑source wrappers for Taro + React + F2 are available on GitHub.

Practical usage

After integration, charts work, but some features need extra development.

Custom Tooltip

Disable default tooltip and implement a custom one using a positioned

View

component.

<code>// Custom tooltip example
<Tooltip custom ref={tooltipRef} triggerOn="click" onChange={handleTooltipChange} />
</code>

Resulting UI shown below.

Common pitfalls

Tooltip does not fire when x‑axis value is 0.

Line chart rendering inconsistencies after axis transposition.

Zero‑value tooltip issue

Root cause:

getSnapRecords

skips values equal to 0; fixed in F2 5.x.

<code>if (!value && value !== 0) { return rst; }</code>

Line chart inversion issue

Need to handle nulls on the transposed axis.

<code>if (this.props.coord.transposed) {
  if (Array.isArray(x)) {
    if (isNaN(x[0])) { /* handle */ }
  }
  if (isNaN(x)) { /* handle */ }
}
</code>

Conclusion

After evaluating chart libraries, F2 was chosen for DingTalk mini‑programs. Despite limitations such as missing DOM APIs and non‑standard canvas context, the integration steps above enable functional, high‑resolution charts. Adding official Taro guidance to the F2 docs would lower the entry barrier.