Hi

I want a bar chart to look like this (attached) – which hopefully shows the issue – but i can’t figure out, how to do it properly. Basically i want 2 (or more) bars with different colors, like this i don’t need a legend.

Any tips how to do it?

Thanks in advance!

CommentFileSizeAuthor
#6 Bildschirmfoto 2026-04-17 um 10.55.59.png201.91 KBstixer
#4 Screenshot 2026-04-16 at 8.22.04 AM.png53.94 KBandileco
#3 version-2.png83.84 KBstixer
#3 version-1.png83.72 KBstixer
Bildschirmfoto 2026-04-15 um 17.30.35.png327.53 KBstixer

Comments

stixer created an issue. See original summary.

andileco’s picture

andileco commented

You only need one column in the table (so hit the "Delete Column" button) that you can call "Value" or something like that. In the text fields next to the colors, put Before and After. I would add "Categories" in the top left cell. Make sure you hide the legend. Is that clear?

stixer’s picture

stixer commented
StatusFileSize
new version-1.png83.72 KB
new version-2.png83.84 KB

Thanks so much for your prompt support!

The problem with 1 column is, i cannot have different colours for each bar, or else, i cannot have the legend/bar value next to each bar instead of a legend. Look at the 2 versions i can do, you see what i mean? Version 2 would be the correct display, but different colours for each bar like in version 1. Somehow the top left field does not display anything in my case… have wondered already what this field is supposed to do?

Thanks!

andileco’s picture

andileco commented
StatusFileSize
new Screenshot 2026-04-16 at 8.22.04 AM.png53.94 KB

OK, thanks for clarifying! If you use the Chart field, I think your initial attempt is not bad. I looked into the Highcharts API for X-axis type: https://api.highcharts.com/highcharts/xAxis.type, and it says this:

"The type of axis. Can be one of linear, logarithmic, datetime or category. ... In a category axis, the point names of the chart's series are used for categories, if not a categories array is defined."

I recreated your "version 1" in my demo environment, and then (using the "Enable debug" option in the overall Charts settings) grabbed the JSON and put it into the JSFiddle provided at https://www.highcharts.com/demo/highcharts/bar-chart.

I updated the X axis to look like this:

"xAxis": [
        {
            "type": "category",
            "title": {
                "text": "",
                "style": {
                    "color": "#000"
                }
            },
            "labels": {
                "style": {
                    "color": "#000"
                },
                "rotation": 0
            },
            "gridLineColor": "#ccc",
            "lineColor": "#ccc",
            "minorGridLineColor": "#e0e0e0",
            "opposite": false
        }
    ],

and then the series to look like this:

"series": [
        {
            "name": "Before",
            "color": "#a7a5a5",
            "data": [
                {
                    "name": "Before",
                    "y": 0.055
                }
            ]
        },
        {
            "name": "After",
            "color": "#11e010",
            "data": [
                {
                    "name": "After",
                    "y": 0.033        
                }
            ]
        }
    ]

The result looked like the attached, which is not far from what you created originally.

You could use a hook to take your Version 1 and then make these modifications, but I don't know if that's worth it.

Another consideration would be using a View for these data. Views does what you're wanting naturally if you use the "Grouping field".

stixer’s picture

stixer commented

Thansk so much! So, i will look into it, but you are right, seems to be worth to look into views then to handle the charts. Will do. Thanks again!

stixer’s picture

stixer commented
StatusFileSize
new Bildschirmfoto 2026-04-17 um 10.55.59.png201.91 KB

I have tried views, but i cannot find a way how to achieve this actually, since we have pages with several different chart types and data. Most of the time we use a legend, but sometimes not and for those specific charts we just want to change the bars manually… maybe i am confused already, but i don’t think views will help here, does it?

I found Charts Twig module that looks promising at first sight, but i cannot make this running at all, i never used such and i am quite a programmer … i also cannot find a documentation… do you know where i can find one to understand hwo to set it up? Or will this module will help anyway?

Btw., the screenshot you sent looks just like our first approach, see attachment… that works somehow, but we got a space where the second bar is now missing, not ideal… mmh