Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to reversed yAxis in VueUiXy #194

Answered by graphieros
jougisljs asked this question in Q&A
Discussion options

How to reversed yAxis in VueUiXy

You must be logged in to vote

@jougisljs
Thank you for the screenshot.
Try setting all your dataset values to negative, and using formatters to display values as positive:

const config = ref({
 // ...rest of your config
 chart: {
 grid: {
 labels: {
 yAxis: {
 formatter: ({ value }) => {
 return Math.abs(value)
 }
 }
 }
 },
 tooltip: {
 customFormat: ({ datapoint }) => {
 let html = "";
 datapoint.forEach(d => {
 html += `<li>${d.name}: ${Math.abs(d.value)}</li>`
 })
 return `<ul>${html}</ul>`
...

Replies: 2 comments 2 replies

Comment options

Can you be more specific ?

You must be logged in to vote
2 replies
Comment options

By default, the origin of the y-axis is at the bottom left. How can I set it to the top left?

Comment options

Comment options

@jougisljs
Thank you for the screenshot.
Try setting all your dataset values to negative, and using formatters to display values as positive:

const config = ref({
 // ...rest of your config
 chart: {
 grid: {
 labels: {
 yAxis: {
 formatter: ({ value }) => {
 return Math.abs(value)
 }
 }
 }
 },
 tooltip: {
 customFormat: ({ datapoint }) => {
 let html = "";
 datapoint.forEach(d => {
 html += `<li>${d.name}: ${Math.abs(d.value)}</li>`
 })
 return `<ul>${html}</ul>`
 }
 }
 },
 line: {
 labels: {
 formatter: ({ value }) => {
 return Math.abs(value)
 }
 }
 },
})
You must be logged in to vote
0 replies
Answer selected by jougisljs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
usage question Questions related to library usage

AltStyle によって変換されたページ (->オリジナル) /