React Victory chart displays different line lengths for straight lines
I'm using the Victory library to draw a line chart in React, but it seems to draw lines with different widths depending on whether the line is straight or is at an angle.
Screenshot of the line it's drawing:
In the screenshot, the dots are drawn using VictoryScatter and the line(s) using VictoryLine. I noticed that VictoryLine draws using path, so is this a limitation of SVG's path to draw like this? Because this seems weird to me!
This is happening because of the order or rendering of the SVG components. The ones at the top and the bottom appear to be thinner because they are rendered behind the axes (this is explained here)
I'm not sure why, but changing the order didn't work for me, so I had to use VictoryPortal to bring my components to the front.
- Cannot move to previous slide in a JavaScript Slider
- How do I import Bootstrap in SvelteKit, Recommended Way?
- Randomly select 2 elements from an array where each element is selected 4 times and the pairs are not duplicated
- Why is submit button getting enabled even when required inputs are empty?
- Javascript: flatten array of arrays
- Display new window fullscreen on second monitor with Javascript
- How do you add/remove hidden in <p hidden> with JavaScript
- JavaScript Promises - reject vs. throw
- In TypeScript 5.6+, `Buffer` is not assignable to `ArrayBufferView` or `Uint8Array | DataView`
- Set a default parameter value for a JavaScript function
- Object.hasOwn() vs Object.prototype.hasOwnProperty()
- ServiceWorker Update loop - Create react app
- How to disable a ts rule for a specific line?
- Is it possible to tell esbuild to ignore top-level await when bundling to node12 target?
- Prevent Image Scaling on HighDPI Displays
- Google OAuth2 giving "Invalid grant_type" error
- Observe attribute changes using Alpine.js
- Canceling a react-query mutation
- How to create a writable byte stream I can evaluate?
- Is there any way to create an shortcut desktop to a Node.js (npm) application?
- How can google.maps.geometry be undefined?
- Argument of type x is not assignable to parameter of type 'ForwardRefRenderFunction<unknown, PropsWithoutRef<P>>'
- Why does Promise.all() allow non Promise objects?
- Make sure that using this pseudorandom number generator is safe here
- How to embed a database into my vuejs app?
- fetch data with sort not updating after build
- Async inside filter function in JavaScript
- Exception: (String,(class),String) don't match the method signature for CalendarApp.Calendar.createEvent
- How is indexedDB conceptually different from HTML5 local storage?
- chart js how to fill legend box with colour