Combined Line and Stacked Box Chart

[Jooles]

Hi there,

what I have is this:

What I want is something like this:

Is this possible?

This is the code I have:

{
    type: 'bar',
    data: {
        labels: [
            '0',
            '2',
            '5',
            '5',
            '10',
            '15',
            '20',
            '25'
        ],
        datasets: [
            {
                label: 'Haushaltsstrom',
                backgroundColor: '#ddd',
                data: [
                    300,
                    -93,
                    -25,
                    -67,
                    51,
                    -97,
                    9
                ],
                
            },
            {
                label: 'E-Auto',
                backgroundColor: '#df4539',
                data: [
                    400,
                    13,
                    -38,
                    89,
                    -10,
                    75,
                    -52
                ],
                
            },
            
        ],
        
    },
    options: {
        title: {
            display: false,
            
        },
        scales: {
            xAxes: [
                {
                    stacked: true,
                    scaleLabel: {
                        display: true,
                        labelString: "Zeit in Jahren",
                        
                    }
                },
                
            ],
            yAxes: [
                {
                    stacked: false,
                    scaleLabel: {
                        display: true,
                        labelString: "€",
                        
                    }
                }
            ]
        },
        
    },
    plugins: {
        datalabels: {
            display: true,
            align: 'top',
            backgroundColor: '#000',
            borderRadius: 10
        },
    }
}

The data labels are not being displayed at all

Thanks for your help!

Best,
Julian

[ian]

Hi @Jooles,

• To fix datalabels, you must put the plugins object inside the options object. You may refer to the datalabels documentation here.
• To show a mixed bar/line graph, just set type: 'line' on the dataset. If you want to show a trend, you must compute the trend line yourself and set the values. This is from the Chart.js documentation on mixed charts.

Here’s your configuration with example adjustments.

[Jooles]

Hi @ian !

Wow, thanks a bunch!

I still have another question, is it possible to display rotated labels like in my example but only every other two datapoints or such?

Best,
Jooles

[ian]

Yep, please refer to the Chart.js datalabels documentation for details on how to do that.

You need to set the rotation attribute, and use display to determine when to show the labels. formatter will control what is displayed on the label.

Here’s an updated example

[Jooles]

You’re my hero! Thank you once again!