Fabian
Fabian

Reputation: 51

Chartjs 2 - Stacked bar with marker on top

I´m trying to build a stacked bar chart with a marker on top.

how it should look like

how it should look like.

So I tried to build a bar chart and combine it with a line chart, but that doesn´t work well.

my result so far

my result so far .

Is there a way to get a similar result ?

var chartData =  {
    labels: ["Zukauf", "Produktion"],   
    datasets: [ 
        {
            label: "offene TP",
            data: [102, 55],
            backgroundColor: "rgba(15,173,25,1)",   
            hoverBackgroundColor: "rgba(15,173,25,1)"
        },{
            label: "erledigte TP",
            data: [256, 55],
            backgroundColor: "rgba(220,111,18,1)",
            hoverBackgroundColor: "rgba(220,111,18,1)"
        },{
            type: "line",
            label: "Plan",
            data: [425],
            backgroundColor: "rgba(255,255,255,0)",
            borderColor: "rgba(0,0,0,0.4)",
            borderWidth: 2,

            hoverBackgroundColor: "rgba(12,128,133,1)"
        }
    ]

};  

Upvotes: 1

Views: 2017

Answers (1)

Fabian
Fabian

Reputation: 51

After few confusing researches in the chartjs documentation I found the perfect solution.

solution picture

var chartData =  {
    labels: ["Zukauf", "Produktion"],   
    datasets: [ 
        {
            label: "offene TP",
            data: [102, 55],
            backgroundColor: "rgba(220,111,18,1)",
            hoverBackgroundColor: "rgba(220,111,18,1)"
        },{
            label: "erledigte TP",
            data: [256, 55],
            backgroundColor: "rgba(15,173,25,1)",   
            hoverBackgroundColor: "rgba(15,173,25,1)"

        },{
            label: "Plan",
            data: [425, 500],
            borderColor: "rgba(0,0,0,1)",

            //important settings

            //set the width of the line ( or point )
            pointRadius: 50,
            // don´t show line betrween points
            showLine: false,
            //change points of line chart to line style ( little bit confusin why it´s named point anyway )
            pointStyle: 'line',

            //chart type
            type: "line",
        }
    ]

};  

Only need to change the 'pointStyle' to 'line', the 'pointRadius' for the width of the line and disable 'showLine'.

Upvotes: 4

Related Questions