# Different colors Bar Chart (JavaScript) + CSS editor **URL:** \ **Category:** KNIME Analytics Platform\ **Created:** [February 29, 2024, 10:46am UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567 "2024-02-29T10:46:42Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![bsaigua](https://forum-cdn.knime.com/user_avatar/forum.knime.com/bsaigua/32/64960_2.png) [@bsaigua](https://forum.knime.com/u/bsaigua)\ **Post date:** [February 29, 2024, 10:46am UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/1 "2024-02-29T10:46:42Z")
Hello, I need someone to help me with some ideas on how I can implement a Bar Chart that represents service values with different colors, which I designate in the Rule Engine node. My table is formed as follows. ![image](https://forum-cdn.knime.com/uploads/default/original/3X/c/2/c23f9e7ba8c92970aa655432f4edfc57d96f3449.png) ![image](https://forum-cdn.knime.com/uploads/default/original/3X/b/2/b2ce5fd1254eb81829eaf01e0686d8776f90e072.png) I’ve tried several ways, using CSS Editor nodes, String Manipulation to create a class where it contains the color and the value of “LISTA(NIVEL\_S)” and pass it to the CSS editor, but I can’t manage to color the bar charts with the colors I want. ![image](https://forum-cdn.knime.com/uploads/default/original/3X/0/3/03082e08a7f75f016b8b5f8751d19d6d9bb40a77.png) ---
**Author:** ![marzukim](https://forum-cdn.knime.com/letter_avatar_proxy/v4/letter/m/bbe5ce/32.png) [@marzukim](https://forum.knime.com/u/marzukim)\ **Post date:** [February 29, 2024, 1:08pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/2 "2024-02-29T13:08:27Z")
hi bsaigua, i considered using a color and a bar chart node for data visualization … unsure if this approach would be optimal for datasets containing a significant number of data points. ![image](https://forum-cdn.knime.com/uploads/default/original/3X/5/9/59df66709b9188dec10e9f21a2a5f41bfcd0985c.png) rgds ---
**Author:** ![bsaigua](https://forum-cdn.knime.com/user_avatar/forum.knime.com/bsaigua/32/64960_2.png) [@bsaigua](https://forum.knime.com/u/bsaigua)\ **Post date:** [February 29, 2024, 1:23pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/3 "2024-02-29T13:23:28Z")
Hello Marzukim, Thank you very much for your response, but I have already tried the approach you suggest. The issue is that I cannot work with dates as they change successively, and what indicates the color I should assign to that date is the value (LISTA(NIVEL\_S)). Similar to this ![image](https://forum-cdn.knime.com/uploads/default/original/3X/a/3/a33d92e77186336139e508a1dbe7852bf9bb0c68.png) ---
**Author:** ![marzukim](https://forum-cdn.knime.com/letter_avatar_proxy/v4/letter/m/bbe5ce/32.png) [@marzukim](https://forum.knime.com/u/marzukim)\ **Post date:** [February 29, 2024, 1:58pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/4 "2024-02-29T13:58:04Z")
i apologize that did not meet as per your expectations. hope other knime members can assist you with this issue … ---
**Author:** ![gonhaddock](https://forum-cdn.knime.com/user_avatar/forum.knime.com/gonhaddock/32/35425_2.png) [@gonhaddock](https://forum.knime.com/u/gonhaddock)\ **Post date:** [February 29, 2024, 2:55pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/5 "2024-02-29T14:55:26Z")
Hello @bsaigua The chart is a simple bar char, it can be easily achieve with R/Py coding; as the chart libraries accept both HTML/CSS Hex color format plus relative ‘color names’ as input. I don’t think that you can configure your custom color choice in ‘Color Manager’ node, other than automatic palette or color ramp for numeric values; besides manual picking assignment, that it isn’t an option for you. What do you think about it? Can you handle scripting nodes? BR ---
**Author:** ![hotzm](https://forum-cdn.knime.com/letter_avatar_proxy/v4/letter/h/958977/32.png) [@hotzm](https://forum.knime.com/u/hotzm)\ **Post date:** [February 29, 2024, 2:57pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/6 "2024-02-29T14:57:37Z")
@marzukim If you don’t mind some configuration (and googling), I got pretty close with our Generic ECharts node. ![Screenshot 2024-02-29 at 15.57.17](https://forum-cdn.knime.com/uploads/default/original/3X/c/e/ce99d555c46f916d6cf4f611d811447a91174090.png) > **[Forum-77567-BarChartColors – hotzm](https://hub.knime.com/hotzm/spaces/Public/Forum/Forum-77567-BarChartColors~SILQBfF2VPRwlXes/current-state)** > > Coloring bar chart bars by value in each bar ---
**Author:** ![bsaigua](https://forum-cdn.knime.com/user_avatar/forum.knime.com/bsaigua/32/64960_2.png) [@bsaigua](https://forum.knime.com/u/bsaigua)\ **Post date:** [February 29, 2024, 4:06pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/7 "2024-02-29T16:06:28Z")
“Thank you very much!! It was very helpful to me.” ---
**Author:** ![hotzm](https://forum-cdn.knime.com/letter_avatar_proxy/v4/letter/h/958977/32.png) [@hotzm](https://forum.knime.com/u/hotzm)\ **Post date:** [February 29, 2024, 4:12pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/8 "2024-02-29T16:12:38Z")
One note: if your category column (`LISTA(NIVEL_S)`) contains many distinct values, picking colors manually will be very tedious and using a categorical palette will not really scale, since you run out of distinguishable colors pretty quickly (after 20 it gets tough). Choosing a color scale will… öh, scale much better 🙂 . ---
**Author:** ![system](https://forum-cdn.knime.com/uploads/default/original/1X/ab3ccf34482a0329361734a18199390177204f15.png) [@system](https://forum.knime.com/u/system)\ **Post date:** [March 7, 2024, 4:12pm UTC](https://forum.knime.com/t/different-colors-bar-chart-javascript-css-editor/77567/9 "2024-03-07T16:12:57Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.