Диаграмма: две биполярные полосы друг под другом

Question

В настоящее время я создаю биполярный Barchart с AngularJs. На данный момент две серии отображаются рядом друг с другом. Вот как это выглядит в настоящее время. Как я могу отобразить их друг под другом, чтобы они выглядели как на картинке два?

Вот как это должно выглядеть. Я использую Chartist.

Это мой component.ts:

    this.client.get("https://mylink", { observe: "response" })
    .subscribe(data => {
    this.series = data.body["series"];
    this.labels = data.body["labels"];
    console.log(this.labels);
    console.log(this.series);

    var datawebsiteViewsChart = {
        labels: this.labels,
        series: this.series
    };

    var optionswebsiteViewsChart = {
        axisX: {
            showGrid: true
        },
        low: -900,
        high: 800,
        chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }
    };
    var responsiveOptions: any[] = [
        [
            "screen and (max-width: 640px)",
            {
                seriesBarDistance: 5,
                axisX: {
                    labelInterpolationFnc: function (value) {
                        return value[0];
                    }
                }
            }
        ]
    ];
    var websiteViewsChart = new Chartist.Bar(
        "#websiteViewsChart",
        datawebsiteViewsChart,
        optionswebsiteViewsChart,
        responsiveOptions
    );
    //start animation for the Emails Subscription Chart
    this.startAnimationForBarChart(websiteViewsChart);
});

Это HTML-часть.

<div class="card card-chart">
    <div class="card-header card-header-warning">
        <div class="ct-chart" id="websiteViewsChart"></div>
    </div>
    <div class="card-body">
        <h4 class="card-title">Title</h4>
        <p class="card-category">Subtitle</p>
    </div>
</div>

Какие параметры мне нужно изменить, чтобы мои отрицательные бары отображались непосредственно под положительными, а не рядом с ними?

Заранее большое спасибо!

РЕДАКТИРОВАТЬ: Теперь это выглядит так

Answer 1

Это похоже на открытый вопрос о Чартисте. Выпуск Github

Я бы порекомендовал использовать другие библиотеки графиков (например, highcharts).

Если вы все еще ищете исправление (пока эта функция не будет введена), я нашел обходной путь, выполнив следующие шаги

1. Сначала сложите отрицательный ряд
2. Стек положительных значений отрицательного ряда следующий
3. Стек позитивных серий следующий

Также вам нужно установить stackBars в true чтобы это работало.

series: [
    [-1, -2, -4, -8, -6, -2, -1, -4, -10, -2],
    [1, 2, 4, 8, 6, 2, 1, 4, 10, 2],
    [5, 20, 5, 5, 21, 12, 22, 3, 20, 2],
   ]
}, {
  stackBars: true,

Рабочий пример