Visualisation Styles - Bar Chart Gridlines and Max Y-axis Value

Hi Community!

I need tips for 2 visualisation requests:
1) I want to keep a short dash extending from the y-axis values, without having the gridlines running through the entire chart. Is there a quick solution for this?
2) I wish the max y-axis value to be always above the max value of any bar value. In the viz settings a max y-axis value can be set, but that would disable auto-scaling. Is there a way to let it auto-adjust the top y-axis value to always cover the max bar value?

Thanks a lot!

ginandtobby_0-1746775843603.png

 

Solved Solved
0 8 216
1 ACCEPTED SOLUTION

Hi ginandtobby

tanakakentaro_0-1746781569690.png


1) Is this the image you are assuming?
If so, You can do this by clicking the Custom button at the bottom right in the Visualization section of the Explore screen and overriding the following code. (It takes a bit of work. If you don't know how to do it, I'll explain it to you.)

 

  ,yAxis: [{
    gridLineWidth: 0,
    tickLength: -5,
    tickWidth: 3,
    zIndex: 10
  }],

 

I can't immediately answer 2), so for now I'll just reply to 1).
Best regards,
Kentaro

View solution in original post

8 REPLIES 8

To clarify: I'm using Looker, not Looker Studio.

Hi ginandtobby

Regarding 1), do you want it to look like this image?

tanaka_kentaro_0-1746780732765.png

It takes a bit of work, but it can be achieved by changing the graph configuration.
https://cloud.google.com/looker/docs/chart-config-editor

  yAxis: [{
    gridLineWidth: 0,
    tickLength: -5,
    tickWidth: 3,
    zIndex: 10
  }]

If you don't know the detailed steps, I will tell you.

2) I don't know right now.

Hi ginandtobby

tanakakentaro_0-1746781569690.png


1) Is this the image you are assuming?
If so, You can do this by clicking the Custom button at the bottom right in the Visualization section of the Explore screen and overriding the following code. (It takes a bit of work. If you don't know how to do it, I'll explain it to you.)

 

  ,yAxis: [{
    gridLineWidth: 0,
    tickLength: -5,
    tickWidth: 3,
    zIndex: 10
  }],

 

I can't immediately answer 2), so for now I'll just reply to 1).
Best regards,
Kentaro

Thank you so much @tanakakentaro ! Yes this is what I wanted for point 1! May I check if the Chart Config Editor feature needs to be enabled in order to access this? I currently do not see this button in my visualization settings.

ginandtobby_0-1746783883319.png

(pic taken from online)

Thanks!

Unfortunately, it seems you likely won't be able to use it unless 'can_override_vis_config' is enabled by your administrator.
If you really want to use it, I recommend that you consult with the administrator.
https://cloud.google.com/looker/docs/chart-config-editor#prerequisites

Hi @tanakakentaro. My Looker admin enabled this permission for me. It worked well! Thanks a lot!

Hi @tanakakentaro. Regarding part 2), Highcharts AI told me that I can write a function to dynamically compute the max value of my series and set the max y-axis ticker value to be slightly higher by adding an offset. However, the code it provided didn't work in my chart config editor. I'm not sure if the issue is a syntax error or if this type of function isn't actually supported. Do you see a possible solution along this direction? 

The function provided by Highcharts AI and how my config editor responded:

ginandtobby_0-1746803142086.png

It could work in JSFiddle:

ginandtobby_1-1746803676949.png

Many thanks!

 

Hi @ginandtobby 

From what I've researched, I think it's difficult to dynamically change this json in Looker... (This is not an official opinion.)

If it's acceptable for dummy data to be displayed to the viewer, like in the image, you can achieve this by creating a dummy field using a custom field, etc.
There might be a better way though.

tanakakentaro_0-1746991453983.png

Thank you.

Top Labels in this Space
Top Solution Authors