Hello, is it possible to change the format (and orientation) of the legends in the X and Y axis in a canvas chart ?.
Also, is it possible to change the format of a data in a table inside a canvas ?.
An image is attached with an example.
Thank you.
Hey @fefontana,
The format of the timestamps in the canvas workpad is a known limitation, and is being tracked here: [Canvas] Apply relevant Kibana advanced settings · Issue #37436 · elastic/kibana · GitHub
As for changing the format/orientation of the legends...it looks like support for this is being discussed here: [Canvas] Make it easier to style chart axes · Issue #44325 · elastic/kibana · GitHub. Following the conversation in that thread, I found a snippet that worked for me:
This won't be a drop-in fix for you, but it should serve as a starting point:
.flot-x-axis div {
white-space: nowrap;
transform: rotate(-90deg);
text-indent: -100%;
transform-origin: top center;
text-align: right !important;
top: 280px !important;
}
Thank you Larry, your previous post is a workaround, but I'm trying to get information about the customizing possibilities of CSS element style on Canvas, and I'm not finding too much at all.
Do you know where can I find reference documentation about the Canvas CSS code ?.
I have no idea where to learn about it.
Take a look at the attached image.
@Catherine_Liu do you know if we have documentation describing what's possible for CSS styling within Canvas?
Sorry if my question is obvious, but I'm referring to CSS documentation within Canvas, not in general. I'm trying to understand Canvas formatting options in Kibana.
For example, where can I find information about ".flot-x-axis" Larry is using in the previous post ?. Where is documented the "white-space:" property inside ".flot-x-axis div" block ?. It is something particular of Kibana Canvas ?.
This is what I mean.
Yeah sorry I understood what you were asking. I didn't think you were looking for CSS documentation in general
Any reference or documentation about it will be appreciated!.
Hello, I've been trying to implementa and format a Canvas Dashboard and it's been a nigthmare.
The lack of documentation, instability and the low degree of formatting options makes canvas unusable for me. Maybe it needs more time to mature and gain reliability.
If any of the Elastic Team Members can provide a clear and detailed documentation about canvas (like Elemeny Style CSS, change bars width, change scale, etc, etc) it would be appreciated.
Hey there Franco,
for formatting charts in Canvas, it really comes down to three options:
- Style the chart with what's available in the sidebar UI (or using expressions)
- The CSS in the element
- Make the chart in the Visualize or Lens app and then add it to your workpad
For the first option, all elements on a workpad are backed by expressions (which you can view if you highlight an element and click the Expression editor button in the bottom right). To view all the functions and arguments that are available to you, you can check out our function reference here: Canvas function reference | Kibana Guide [7.11] | Elastic
Hopefully this is a good resource to figure out what kinds of things you can style directly from an expression or from the UI. In addition to this, I highly recommend checking out the sample workpads that come packaged with the Sample Data. They're oftentimes a great resource on good ways to style charts.
Additionally, it seems like you're wondering about the CSS classes that are available for you to style. We unfortunately don't keep a comprehensive list of all the CSS classes (partly due to the fact that at the moment we use a 3rd party framework known as "flot" for our chart rendering). If you're building an element and want to try to modify the style, you can see what HTML class is available to you by right clicking on the element and selecting "Inspect" or "Inspect Element" to see what HTML class is available. Then you can use the Element Style CSS field in the sidebar to select that HTML class using CSS and style it with any CSS property that is normally available in CSS. The Element CSS is just normal CSS that is injected directly within the DOM for the workpad element to have access to.
Finally, if Canvas can't get your chart to look the way you want, you might try making the chart in Lens and then selecting the "Add from Kibana" option in the "Add element" dropdown in your workpad.
Apologies if I've covered anything you're already familiar with! I hope this helps!
Hello Poff, thank you for your answer. I'm aware of "Canvas function reference | Kibana Guide [7.11] | Elastic" but as far I know this documentation is not enough to make some customizations to the charts. I've been hanging around the classes shown in the browser (when canvas is loaded) and also looking at the flot framework reference, but it is really not friendly to pretend to implement a report or dashboard with Kibana canvas this way.
I was trying to do something very simple, change the width of the bars in a chart (an image is attached) but I haven't found how to do it in Kibana nor any related documentation. It has to be more friendly and there should be specific documentation about canvas CSS formatting.
While canvas does not reach maturity, it is better to use visualizations to implement dashboards.
For changing widths in a bar chart specifically, if you open up the expression editor in the chart, you should see a call to the seriesStyle function that has a bars argument. Changing the value of the bars argument will adjust the width of the bars in the chart. One word of caution however: with the way flot renders charts, the bar width value is expressed in "axis units" and not pixels so that means you might have to use a very large number to get the bar widths to change, depending on your x-axis size.
I'll definitely pass on your feedback to the Canvas team around finding ways to make formatting options better documented in the future!
1 Like
Hi Poff, once again thank you for your answer. I've done what you said about modifying the bar width, and finally I get the chart as I need it.
In my case the unit of the X axis is "day", that's why I must put a very high value in the "bars" parameter to take effect in the chart. I used a value of 50000000. An image is attached.
It's good to know you take my feedback in order to introduce better options and documentation for canvas. It was very time-consuming to find out documentation about canvas formatting.
I'm super glad you got it working!
For more ideas and help this canvas gallery may help you: Kibana Canvas examples | Download now from Elastic content share
Thank you Felix it's a good idea to have an elastic content share community. I hope in the future this community can develop more resources than the ones we can find today.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.