Как увеличить высоту полос?

Я создал воронку с помощью приведенного ниже сценария.

Highcharts.chart('container', {
    chart: {
        type: 'funnel'
    },
    title: {
        text: 'Sales funnel'
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: "Sales Chart:<br>{point.name}<br>Cart: {point.value:,.0f}<br>New Users: {point.unique:,.0f}<br>Total Orders Rate: {point.cr}%",
                softConnector: true,
                inside: true,
            },
            neckHeight: "0%",
                neckWidth: "80%",
                width: '15%',
                reversed: true,
        }
    },
    legend: {
        enabled: false
    },
    series: [{
    name: 'Unique users',
    keys: ["name", "y", "value", "unique", "did", "cr"],
    data: [
      ['Website visits', 1, 659, 541, '1', '1.31'],
      ['Downloads', 1, 392, 288, '38', '0.70'],
      ['Requested price list', 1, 562, 467, '101', '1.13'],
      ['Invoice sent', 1, 338, 282, '97', '0.68' ],
      ['Finalized', 1, 77, 59, '25', '0.14' ]
    ]
  }],
});

jsfiddle: https://jsfiddle.net/kiranuk/xhfbyj64/

Группа выглядит переполненной. Как увеличить высоту полос?

enter image description here

Спасибо за помощь.

jsfiddle.net/c1azjxku
Robert Harvey 17.05.2022 15:27

Вам действительно нужен этот первый <br> в format: "Sales Chart:<br>{point.name}? Также вам действительно нужно повторять «Таблицу продаж» для каждой группы?

microspino 17.05.2022 15:42

@microspino Да, мне нужны оба. Это работает, когда мы устанавливаем высоту диаграммы.

kiran 17.05.2022 16:04
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
3
17
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно увеличить высоту диаграммы. Например:

  chart: {
    type: 'funnel',
    height: 600
  }

Живая демонстрация:https://jsfiddle.net/BlackLabel/a6sr93fo/

Ссылка на API:https://api.highcharts.com/highcharts/chart.height

Другие вопросы по теме