manasi s,

Indeed, in the examples, bar chart does not support negative values.

To do so, you have to change the yScale configuration as follows :

this.yScale
.range([this.barHeight, 0])
.domain(d3.extent(this.data, d => d[this.valueField])
.nice();

The d3.extent() method returns an array containing the bounds of your datasource ( this.data ).

Sr Frontend Engineer performing with Vue, TS/JS, GitLab | Writing articles monthly

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
Adrien Miquel

Sr Frontend Engineer performing with Vue, TS/JS, GitLab | Writing articles monthly