How to remove / change size of marks in Line Plot (Plotly)

KNIME Analytics Platform
1

Hi all, does anyone know how to change the size/appearance/colour of the marks, used in a Line Plot (Plotly)? I guess it has to be done via CSS editor, but here I would need a real basic “How To” as I have never worked with it before. Best regards, Marc

2

Hi,
when you open the plot, you can right click into it and select “inspect element”. Here you can see the HTML/SVG content of the view. Now you have to navigate around a bit in the HTML code and you will find that the points in the line plot have the CSS class “point”. You will also see that some attributes are set directly in the element’s style attribute, so to overwrite those you might need to suffix your CSS styles in the editor with !important. So lets assume you want to turn all the points red. In that case, add a CSS Editor node and enter this:

.point {
    fill: red !important;
}

Connect the editor via flow variable connection to the visualization node and in your visualization node’s configuration dialog go to the flow variables tab and at the bottom at the list select “css-stylesheet” next to “customCSS”. And that should do the trick.
Kind regards,
Alexander

3 Likes
3

Thanks Alexander for quick response, it worked very well! Best Regards, Marc

4

Hi Alexander, changing color worked quite well but where can I find the syntax to apply other changes like size of the marks. Is there a reference to look this up? Best Regards, Marc

5

Hi Marc,
for that you have to check the available SVG or CSS attributes. The Mozilla developer page is usually a good source. For changing the size I suggest transform: scale(val) (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform).
Kind regards
Alexander

3 Likes
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.