How to set dynamic x axis ticks based off user input with date picker component

App Building
1

I am wanting to have a one tick per month and dynamically set the date range with the component. Here is the current code for the x axis:
"type": "date",
"title": "Month",
"tickformat": "%B
%Y",
"tickmode":"linear"
"tick0":"{{procedureDate.value.start}}", **Wasn't sure if this is possible with retool/plotly
"dtick":"30%d",Here I wanted to make the distance between ticks 30 days or 1 month
"automargin": true,
"fixedrange": true,
"gridcolor": "#fff",
"zerolinecolor": "#fff"

Would love to see some examples of other dashboards incorporating various different user inputs for data visualization.

2

Hello, I think you should post this to plotly js forum/issue for better answer. :joy:

3

Hi @Matthew_Driggers,

To adjust the x-axis to have one tick per month, it seems like we need to change the 'dtick' property value in your x-axis configuration to "M1" (we add this json in the PlotlyJSON->Layout section towards the bottom of the chart component configuration):

You can certainly pass in dynamic values from the app using {{}}, but they don't need to be wrapped in extra quotes. ("{{procedureDate.value.start}}" should be changed to {{procedureDate.value.start}})

Also, it seems like to get the "tick0" property to work, you also need to add a range, as I've shown in my example:

"range": [{{dateRange1.value.start}}, {{dateRange1.value.end}}],

Hope that helps! Remember to check the Retool documentation and resources for more information on customization and its built-in features: https://docs.retool.com/docs/building-bar-charts. Also, here in the Retool community forum, you might find examples of dashboards incorporating user inputs, such as this one: http://community.retool.com/t/display-total-value-on-stacked-bar-charts/4720/3

1 Like