Hello!
I have a questionnaire with a single line input of type Date. Then, I display the user answers in a dashboard and I see that the X axis display also a time value that makes no sense in this case (as the user can not select time, only date). Is there a way to display only the date in the axis?
Hello Silvia,
A SurveyJS Dashboard uses Plotly.js to visualize data in charts. In Plotly, you can format the x-axis to display dates without the time part by setting the tickformat property of the x-axis to the desired date format. You can specify the tickformat setting using a static PlotlySetup.onPlotCreating function. Here's an example of how you can achieve this:
JavaScriptimport { PlotlySetup } from "survey-analytics";
PlotlySetup.onPlotCreating.add((model, options) => {
options.layout.xaxis = {
type: "date",
tickformat: "%b %d, %Y",
};
});
Please let me know if you have any further questions.
We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.
Hi Silvia,
Within the onPlotCreating function, use the model.name property to determine a question being rendered. Depending on the question name, you can apply additional chart settings.
JavaScriptPlotlySetup.onPlotCreating.add((model, options) => {
if (model.name === "date") {
options.layout.xaxis = {
type: "date",
tickformat: "%b %d, %Y",
};
}
});
Please let me know if you have additional questions or requirements.
Thanks
Thank you Jane! Actually I can not use the model.name as it changes but I found a way that works
JavaScriptPlotlySetup.onPlotCreating.add((model, options) => {
if (model._type === 'histogram' && model.valueType === 'date') {
options.layout.xaxis = {
type: "date",
tickformat: "%b %d, %Y",
};
}
});
Have a nice weekend!
Hi Silvia,
You are always welcome! Please feel free to contact us if you have any further questions.
Thanks