Text in Line Chart - Canvas Kibana

[Deyvis_Valladares]

Hi Team,

Could you help me in this case?

I try to put labels in my line chart, but I don't now how move the text to over the line.

Thanks.

[lukeelmers]

Hi @Deyvis_Valladares,

You should be able to do this by applying some custom CSS in Canvas:

1. Select your element.
2. Under Element style on the layer settings panel, click the + icon to add CSS.
3. Add your custom CSS to reposition the labels (hint: they all have a valueLabel class applied).
4. Click Apply Stylesheet.

I'd imagine you are looking for something along these lines:

.canvasRenderEl .valueLabel {
  margin-top: -5px;
}

Or if you prefer to use the expression editor, add a css argument to the render function:

css=".canvasRenderEl .valueLabel { margin-top: -5px; }"

Thanks,

Luke

[Deyvis_Valladares]

Thanks Luke!!

Perfect, I have a good graph. But, I have an any question more...How can I see the "key" value in Wordpad? for example, you told me "valueLabel", What about more have? for example: legend, axis X or axis Y, etc.

[lukeelmers]

We don't currently have a documented list of "officially" supported classnames for you to use in your custom CSS, so my recommendation would be to use the developer tools in your browser to get an idea as to what you can modify.

For example, if you want to change the legend, you can inspect the DOM in your browser around the legend, and find the corresponding classname for use in your stylesheet.

[Deyvis_Valladares]

Thanks Luke!