Graphs and Charts

[utkarshwork]

1. My goal and issue: We are using bar-chart. The x-axis shows the months. The y-axis scale is being set automatically according to the data as 0-500-1000-1500-2000. How can this be set dynamically with irregular scale like 0-50-100-500-1500-2000. Is it possible? Can a scroller be implemented inside the bar-chart so that only limited x-axis data is being shown because currently the data is being cramped inside the bar-chart view container, and the bars are being auto adjusted according to it.

2. Issues:

• The smaller data values are being compressed due to the y-axis scaling.
• The values shown on the bar also smaller and unreadable for the smaller values in the bar.
• The whole graph is congested, as no scrolling feature to show only limited x-axis values at a time.
• Can this graph be downloaded in the excel file? So that can be adjusted as per need? Currently a "png" image is being exported where the smaller values are not visible.

[lindakwoo]

@utkarshwork,
I can try to help you fix your bar chart.
You can customize your y-axis ticks if you use the Ploty JSON chart component instead of the bar chart component. My example uses tick values of 1, 10, 100, 1000, and 5000. You can use a logarithmic scale for the y-axis layout so that you can see the smaller values better. With regard to the x-axis, you can put your ploty chart inside a container and then add custom css. You will need to find the classnames of the body and the container itself by inspecting the elements on your dev tools and then apply a wide width to the body, and then set the overflow on the container to scroll:

Here is a video of what mine looks like:

I am also attaching the exported json file for my app in case you want to see how to enter the ploty data and layout. You can download this file and then re-create my app on your own instance like this:

ploty json bar chart.json (14.4 KB)

[lindakwoo]

@utkarshwork,
Did my suggestions work for you?