Line Chart: Invert y-axis and decrease height

Resolved Trewi
(@trewi)

6 years ago
Hi there,

I spent a lot of hours today to find a solution for inverting the y-axis of the first line chart (“1” should be on top and “14” at the bottom). Is there any chance to do that?

Furthermore I am looking for a way to reduce the height of both charts.
I added …

1.) relative and absolute values to the “Chart Size” section.
–> Absoulte values have no effect on the size.
–> Relative values reduced the chart with same width and height (square).

2.) the code below into “Manual Configuration” section.
{"responsive": true, "maintainAspectRatio": false, "width": 800, "height": 400}
–> The chart had the same size like a stamp.

3.) some custom CSS to my Avada theme.
```
.visualizer-12905-1998052157 {
    width: 800px;
    height: 400px; }
```
–> The chart became warped.

Best regards,
Christian
- This topic was modified 6 years ago by Trewi.
The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Contributor contactashish13
(@rozroz)

6 years ago

@trewi you can use {"vAxis": {"direction": -1}} in the manual configuration under settings to invert the Y axis.

For your second problem, you can provide an absolute value for only the height. If it does not work, please share a screen recording of the configuration and how you see the chart on the front-end.

Thread Starter Trewi
(@trewi)

6 years ago

@rozroz many thanks for your quick reply!
Unfortunately your provide code does not work. Also also tried {"vAxis": {"reverse": true}} which I found in another Internet forum.
Is there an alternative code?

To reduce the height I tried:

#1 Chart Size

#2 Manual Configuration 1

–> No change at all: https://kompetenzliga.de/entwicklung/

#3 Manual Configuration 2

–> Result of Manual Configuration 2

Plugin Contributor contactashish13
(@rozroz)

6 years ago

@trewi That code works at our end. I’m not sure why it doesn’t at your end. Please share a screen recording for both your problems to help you further.

Thread Starter Trewi
(@trewi)

6 years ago

@rozroz please find below my screen recodings.

yAxis:
View video

Size:
View video

Plugin Contributor contactashish13
(@rozroz)

6 years ago

@trewi you seem to be using a ChartJS line chart, something I believe you forgot to mention. You need to use the following snippet for manual configuration:

{"scales": { "yAxes": [{ "ticks": { "reverse": "true" }}]}}

For the size, unfortunately both height and width in percentage are mandatory. We will check if we can better this in a future version.

If you are satisfied with our product and support, kindly spare a moment to leave us a review. It would really help us spread the word!

Thread Starter Trewi
(@trewi)

6 years ago

@rozroz thanks a lot for your help!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Line Chart: Invert y-axis and decrease height’ is closed to new replies.