Loading...
Label in Ant Design Charts is one of the means to annotate charts. Multiple labels can be added to a mark:
({labels: [{text: 'genre', // Specify the bound fielddy: -15, // Specify style},{text: 'sold', // Specify the bound fieldfill: '#fff', // Specify styledy: 5,},],});
null;
At the level of View, you can declare label transform through labelTransform
:
({labelTransform: [{ type: 'overlapHide' }, { type: 'contrastReverse' }],});
chart.labelTransform({ type: 'overlapHide' }).labelTransform({ type: 'contrastReverse' });chart.labelTransform([{ type: 'overlapHide' }, { type: 'contrastReverse' }]);
Each mark can have multiple labels. The configuration of a label is roughly as follows:
({labels: [{text: 'name', // Bound field or a constant stringdy: -2, // @antv/g supported stylesfill: 'red', // @antv/g supported stylesselector: 'last', // Selectortransform: [], // Label transform},],});
Here's a simple example:
{"labels": [{"text": "sold","style": {"fill": "#fff","dy": 5}},{"text": "genre","style": {}}]}
For the mark of a graph corresponding to multiple data items, we can select the mark that needs to be retained through selector
. Currently supported values are as follows:
{"labels": [{"text": "Symbol","selector": "last","style": {"fontSize": 10}}],"axis": {"y": {"title": "↑ Change in price (%)"}}}
When the display of labels does not meet expectations, such as overlapping or unclear colors, we can use Label Transform to optimize label display.
It can be found that in the example below, the labels corresponding to times such as 2004 have overlapped.
{"tooltip": {"items": [{"channel": "y","valueFormatter": ".1f"}]},"labels": [{"text": "price","fontSize": 10}]}
At this time, we can set the label transform for the corresponding label: overlapDodgeY, which is used to prevent the labels from overlapping in the y direction.
{"tooltip": {"items": [{"channel": "y","valueFormatter": ".1f"}]},"labels": [{"text": "price","transform": [{"type": "overlapDodgeY"}],"fontSize": 10}]}
Label transform can also be declared at the level of view to process labels for the entire view.
({labelTransform: [],});