Can I change color of bar charts of Small Multiples View component?

[kwatari]

Small Multiples View component is my favourite.
Can I change color of the bar charts? If possible, I prefer just one color to all the small multiples. Thank you.

[ahmadvarasteh]

Hi @kwatari,

Thank you for your comment and I am glad that you like the component!

Here is my answer to your question:
Currently, the colors are not representing anything. but you can change the colors and make them represent something in your visualization. Please follow these steps:

1- Right click on the component and disconnect the link. You do this so that you can apply the changes you want to the component.

2- After you disconnected the link of the component. hold Ctrl and double click on the component to open it in a new tab.

3- Now find the Generic JavaScript View node and double-click on it to open the configuration window.

4- In the configuration window, on the right side, in the JavaScript section you can see some JavaScript code!

5- Go to line #61 and add the following code:

In this way, all the bar charts of all the partitions are going to have the same bar color which in this example gonna be black.

You can also pass in a list of the colors to apply a different color to each bar.

In this case, you are going to have the following result:

Please let me know if you have other questions.

Good Luck!
Ahmad

[kwatari]

Hi Ahmad,

Thank you so much for your reply and giving me the instruction!
I tried it and I got an error with red “!” icon when I execute the component.

I followed the step1 to 5 and added this line;
marker : {color = ‘black’}

Did I make some mistake? Maybe need to reconnect the node, as I disconnected in the step 1?

The error I got is below.

Node: 17:0:1
Message: Error in script
SyntaxError: Invalid shorthand property initializer
at file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/js/base/node/viz/generic/knime-generic-view-v3.js:94:41
at Object.execCb (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:12897)
at b.check (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:6633)
at b. (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:9054)
at file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:814
at file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:9515
at each (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:289)
at b.emit (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:9483)
at b.check (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:7192)
at b.enable (file:///C:/Users/951043/AppData/Local/Temp/knimeViewContainer43100//org/knime/core/require.js:5:9381)

Thank you,
Kazutaka

[ahmadvarasteh]

Hi @kwatari,

Thanks for reaching out.

The code on line #61 should be:

marker : { color : “black”}

There should be a double colon sign ( : ) between color and black.

Please let me know if you had further questions.

Good luck!
Ahmad

[kwatari]

Hi Ahmad,

Thanks a lot, now it works! It was just my mistake😅
You created Choropleth Map and Small Multiples View, right? You help me much, thanks a lot, Ahmad!

[ahmadvarasteh]

Hi @kwatari,

I am happy to hear that.
Let me know if something came up again. I would be happy to help.

Good Luck!
Ahmad