[Chartjs]-Chartjs 2 – Stacked bar with marker on top

by

3👍

✅

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’.

Leave a comment