Text wrapping in Vega JS Charts (SVG and Canvas)

"data": [
{
"name": "table",
"values": [
{"category": "Meat and Seafood", "amount": 28},
{"category": "Milk and milk products", "amount": 55},
{"category": "Ice cream", "amount": 43},
{"category": "Cereals and Breakfast Foods", "amount": 91},
{"category": "Nuts and seeds", "amount": 81},
{"category": "Seasoning and spices", "amount": 53},
{"category": "Sweets, candy, chocolate", "amount": 19},
{"category": "Thin crispy breads", "amount": 87}
]
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale", "labelAngle": -45 },
{ "orient": "left", "scale": "yscale" }
],
*text property*

The text to display. This text may be truncated if the rendered length of the text exceeds the limit parameter.
For versions ≥ 5.7, a string array specifies multiple lines of text.
"axes": [
{ "orient": "bottom", "scale": "xscale",
"encode": {
"labels": {
"update": {
"text": {"signal": "split(datum.value, ' ')"}
}
}
}

},
{ "orient": "left", "scale": "yscale" }
],

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gramener

Gramener

105 Followers

Gramener is a design-led data science company that solves complex business problems with compelling data stories using insights and a low-code platform, Gramex.