Text wrapping in Vega JS Charts (SVG and Canvas)

Creating a Bar Chart using Vega JS library is shown here.
https://vega.github.io/vega/tutorials/bar-chart/

The sample data in the above tutorial has alphabets as Labels. In the real-world, data labels can be lengthy. For example, a bar chart showing sales of various products.

"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}
]
}
],

Replacing with the above product data in the example tutorial would render the below bar chart.

A simple way to remove the overlapping of labels is to rotate the labels by an angle.

"axes": [
{ "orient": "bottom", "scale": "xscale", "labelAngle": -45 },
{ "orient": "left", "scale": "yscale" }
],

To rotate x-axis labels, labelAngle property is used in the code snippet.

The labels no more overlap with neighboring labels but are overlapping with bars.

text type mark documentation mentions a solution to wrap text.

*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.

When x-axis vega config is written such that labels text is an array, each item in the array is rendered in a single line.

"axes": [
{ "orient": "bottom", "scale": "xscale",
"encode": {
"labels": {
"update": {
"text": {"signal": "split(datum.value, ' ')"}
}
}
}

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

By default, vega gets the labels on the x-axis from the field mentioned in the definition of xscale. To transform the labels, encode block is used.

split(datum.value, ' ') results in an array and each item in the array is on a single line.

Originally published by Tejesh P. at https://dev.to on May 6, 2020.

--

--

--

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting all arguments passed into a function

Wrong page with Google cache ? Check your JS

How a purely functional programming language can change your life.

What do you mean by ~ or ^ in package.json?

Battle of the Colors

Algorithms with JavaScript: Two Sum Problem

My second vanilla JavaScript Project: using APIs, promises, classes, error handling, and more!

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

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.

More from Medium

How to Use OneSignal + SendGrid to Send Automated Email Campaigns From Your Web Application

Create Dynamic HTML Tables

Playwright Example >> AutoComplete

How to create, write into and read text file using JavaScript/JScript