Combined Line and Stacked Box Chart

Hi there,

what I have is this:
CleanShot 2022-02-22 at 16.46.02

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 :frowning:

Thanks for your help!

Best,
Julian

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.

1 Like

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

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

1 Like

You’re my hero! Thank you once again!