Как сделать квадратные и горизонтальные линии в старших чартах?

Question

Нужна помощь с highchartsJs. Мне нужен график, как на скриншотах. Для строк я нашел это , но не полностью то, что мне нужно. Для квадрата у меня нет никаких идей. Квадрат является наиболее приоритетным.
Любая помощь будет оценена. Благодарю.
квадрат
горизонтальные линии

Answer 1

Если кому-то нужно что-то вроде , это
https://jsfiddle.net/gdgb941o/20/

chart: {
                type: 'column'
            },
            title: {
                text: false
            },
            tooltip: {
                enabled: false
            },
            credits: {
                enabled: false
            },

            xAxis: {
                tickWidth: 0,
                lineWidth: 0,
                type: 'category',
                gridLineWidth: 0
            },
            yAxis: {
                lineWidth: 0,
                gridLineWidth: 0,
                labels: {
                    enabled: false
                },
                max: 100,
                title: {
                    text: false
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                column: {
                    borderWidth: 0,
                    grouping: false
                },
                series: {

                }

            },

            series: [{

                data: [{
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'Yes',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "33" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }
                }, {
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'The email did not come',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "80" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }

                }, {
                    borderWidth: 2,
                    borderColor:'#41bc9b',
                    color: 'white',
                    name: 'Error in verification',
                    y: 100,
                    dataLabels: {
                        formatter: function() {
                            return "55" + "%"
                        },
                        enabled: true,
                        inside: true,
                        align: 'center',
                        color: 'black',
                        style: {
                            fontSize: 20,
                            textOutline: false
                        }

                    }
                },
                    {
                        borderWidth: 2,
                        borderColor:'#41bc9b',
                        color: 'white',
                        name: 'No',
                        y: 100,
                        dataLabels: {
                            formatter: function() {
                                return "20" + "%"
                            },
                            enabled: true,
                            inside: true,
                            align: 'center',
                            color: 'black',
                            style: {
                                fontSize: 20,
                                textOutline: false
                            }

                        }
                    }]
            }, {

                pointPadding: 0.125,
                data: [{
                    color: '#41bc9b',
                    name: 'Yes',
                    y: 33

                }, {
                    color: '#41bc9b',
                    name: 'The email did not come',
                    y: 80
                }, {
                    color: '#41bc9b',
                    name: 'Error in verification',
                    y: 55
                },
                    {
                        color: '#41bc9b',
                        name: 'No',
                        y: 20
                    }]
            }]