Adjacent div is slightly misaligned with chart rows

[meenasiva]

I have a vue component in which I am rendering the chart. It has a section name, section details and the chart. That’s how each row is rendered. I have added a link for sample application( https://drive.google.com/file/d/16XU4vePaORfgL9VmiBWKg9nD2oaPRWFb/view?usp=sharing ). The chart horizontal rows are slightly misaligned to the section detail rows on the left. We have raised similar issue previously( ) and have applied the changes suggested, still adjacent div is slightly misaligned with chart rows. Here is the screenshot of misalignment( https://drive.google.com/file/d/1S_i32Uo0FR7B3V4HwC17lkdQFjVE0B6w/view?usp=sharing ). Can u plz help us in fixing this issue.

[Manoj Mohan]

@meenasiva,

The project shared above seems to have some issue with dependency package when we tried to run at our end. Can you kindly create sample project along with the node_modules and share it with us over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[meenasiva]

Hi Manoj,

PFB the link to sample application with the node modules.

https://drive.google.com/file/d/1V-cjX1Usu7u0X9x4dNhlcRuiwDZX5sBH/view?usp=share_link

Also we have made the changes suggested in ticket( https://canvasjs.com/forums/topic/div-rows-are-not-aligned-with-chart-horizontal-rows/ ), which we raised earlier.

[Manoj Mohan]

@meenasiva,

Since you are passing border width as 1.5px for the rows, there is some round off issue which results in misalignment with chart gridlines. Passing integer value to border-width and height to row seems to align properly with chart gridlines.

.row-with-border {
  border: 1px solid #ccc;
  height: 22px;
}

.row-with-border:last-child {
  border-bottom-width: 1px;
  height: 23px;
}

Also, check out this updated sample project for complete working code.

—–
Manoj Mohan
Team CanvasJS

[meenasiva]

Hi Manoj,

There is still slight misalignment, it’s prominent for second and third last chart from bottom. Please check the attached screenshot( https://drive.google.com/file/d/1lTweF__lUvhO-UY_ex6uw3zPaMz0GfFl/view?usp=sharing ). Can you please if we align those sections also

[Manoj Mohan]

@meenasiva,

It seem to be working fine, attaching screenshot for your reference.

—–
Manoj Mohan
Team CanvasJS