xscale | Xscale a library of multi-dimensional signal processing | GPU library

I have a basic line chart in d3 which displays properly. I need to find the last entry point of the data and draw a circle on it and a dotted line like the picture above.

Here is my current d3 code:

I want my chart's xAxis to behave like this when zooming using mousewheel. Expected behavior:

My current zoom

I have a problem with my horizontal stacked bar.

The problem: sometimes I got really small values, so one of bands' segment (sub-band ?) has very small width. (Please look below on the picture, rect of each color I call segment):

In some cases I even can't see this segment on the chart. In future I want to show text on each segment (percentage values). But since width of segment can be too small, I need a solution to show text.

Possible solutions: First I thought to set minimal segment width. But it seems the chart will not look OK after this. Also I tried to play around xScale:

In this D3.js version 6.7 bar chart I am trying to align the x axis to show the categories and show the y axis to start at 0. Extending the height of the svg and changing the transforms does not appear to be working. How can I make the x axis categories appear under the bars and make the y axis start at 0? Thank you.

This thread is a continuation of below: Trying to make dynamic D3 Chart with Bar and Difference line/value

I was trying to test the chart using negative values (i.e -ve) but it is not working properly. I made some changes in the yAxis scale Domain by passing dynamic min value instead of static "0" value.

At "0" there should be a dotted line and the -ve value should display down of that and +ve (positive values) values start from "0" and height till its value.

Please help me to solve the issue.

Below is the Code:

I have asked the below help with respect to creation of Bar chart with showing difference value percentage and line, below is the link:

How to create a % difference arrow line with value in a bar chart using D3.js

I have created this thread to seek help on making the same chart more dynamic and below are my try:

1. Making it dynamic in a way to fit in any resolution i.e making responsive (any width and height of Div can render the chart)
2. Tryin to do a reverse difference calculation.(currently it is calculating forward difference calculation and showing forward arrow, but with backward calculation need to show arrow in backward direction)

(Edited: For example: the calculation is basically will start from last bar and then it will continue till the first bar. for example: (6453-7345)/7345 = -12% and (6453-5388)/6453 = -17%.)

1. Trying to get the difference by first bar and last bar value i.e:

Also below is the code:

Bars in the grouped bar chart positioned correctly across x axis, however even thought I have a pre-defined range some of the bars are always beyond the chart with some y value equals to e.g. enormous -31199600.

CodeSandbox

I'm actually trying to make a horizontal stacked bar with text on each bar. I was able to get the text on each bar but there is one issue. There are bars which are very small and the text don't fit in them. How to make the text appear only on the bars that the text can fit or make the bar big enough for the text to fit?

• I followed this example [d3react-multiline-chart][1] which uses D3.js v 5.15.0.

• the problem const [x] = d3.mouse(anchorEl); is not working with D3.js v6.7.0.

• I want to convert the following function using d3.pointer(event) so the line follows the mouse on hover, but also have a circle follow the path.