score:0
using @justin's answer above, i was able to nudge my xaxis labels using transform
like so:
<xaxis
ticklabelangle={-45}
style={{
text: {
stroke: "none",
fill: "#ff0000",
fontsize: 10,
fontweight: 100,
transform: "translate(10px, 0)",
},
}}
/>
score:1
i was able to accomplish this after looking through all of the open issues on the react-vis repo. luckily in my case there would always be a set number of points so this fix will work but if your ticks are dynamic you would need to calculate the amount to move the ticks. in my case there are 24 total ticks and the width of the chart is 962px
so each tick is about 40 pixels apart. to shift each tick over half way translate the x location by half of the width between each tick (minus 1 to account for the 1px width of the tick line itself). also had to shift the text down because once i messed with the transform it cleared the existing transform added by the library. not the best but hopefully this will help someone in the future. 👍
.rv-xy-plot__axis__tick {
line {
transform: translate(-19px, 0);
}
text {
transform: translate(-19px, 14px);
}
}
Source: stackoverflow.com
Related Query
- react-vis - align x-axis ticks with start and end of bars
- How safe is front end with react and redux?
- react.js ant design range filter with start and end dates error
- Rails API with ActionCable (WS) and React Front End
- React MUI Datagrid align column data and header with type "number"
- How to align user name on left side and points on right side with React bootstrap ListGroup?
- How to get start and end date value in React date range picker?
- How to create DOM component with start and end tag in React?
- Swiper React how to stop and start autoplay on hover with Typescript
- React command on yarn start and also init server with same command
- How to deploy React front end + Rails api backend with nginx, capistrano and passenger
- React CSS-HTML align center with flex and image not showing small device
- How to filter dates with a given range from a start and end date?
- How to package React front end with Spring Boot and run the executable jar?
- JSX question with ahref tags. Different text input int the backend and need it to render on the react front end as a hyperlink
- Issue with npm start and compiling in react
- Regex expression for start and end with characters in between numbers
- Not sure what to put in callback function for routing with express and react front end
- React MomentJS get duration from start time and end time
- How to get params from url with React front end and express backend?
- React Date Picker - How to handle if user only selects the start date in range and does not selects the end date?
- How to place text at the start and another at end in the same alert tage in react bootstrap
- Laravel Echo Server not working properly with React Front End and Laravel Back End
- How to group/split array of objects by weeks with start and end date
- react with TS - using setInterval with useEffect() how to send the request and only then start the interval
- how to calculate the different between start date and end date with out holidays ? JavaScript
- React - How do I start a timer, then navigate a different route, then come back and have the timer still in sync with its original countdown?
- Start a setTimeout in componentDidMount and end it in componentWillUnmount in React
- How to validate End date which is less than the Start date in react and add error message in banner if the end date is less than start date in react
- In what file do we connect react front end folder files with back-end folder files with server.js and mysql database connection?
More Query from same tag
- How do I add airbnb react-dates to my HTML page?
- Import files without adding .jsx at the end not working
- Return HTML file using Adonisjs Router
- change color of button text with makeStyles
- React Select options data from ajax
- Advantages of useAppDispatch / How to use useAppDispatch
- React - fetching from API, CORS policy error
- How to call Parent containers function from child component in Reactjs
- MUI v5: Failed prop type: The prop `direction` of `Grid` can only be used together with the `container` prop
- how to use setState in react route?
- PayPal Smart Payment Buttons using old State
- React App as Application in IIS doesn't work
- prevent react-router from detecting location change
- Issue getting background color to change
- Unhandled Rejection (TypeError): Converting circular structure to JSON IN REACT FETCH
- Why is my useEffect() not running on change or page refresh - React Js?
- Socket not emit messages
- Delay in updating D3 map in react
- React, implementing Dark-Light-Mode with localStrorage
- Why this next.js and typescript page says "Property 'data' does not exist on type"
- How to add another className in react if I use CSS Modules?
- How do I fix typescript compiler errors on css files?
- CSS Flex-box justify-self / align-self not working
- How can I change what is rendred with a click event in React
- Why do I need to spread the object to pass it down as a prop in React?
- why we use this.setState() insted of super.setState() in react component
- Convert into HTML checkboxes using JSON values in react
- Warning: Failed propType: Invalid prop `component` supplied to `Route`
- How to pass data to another file?
- How to toggle css style using styled-components?