Chart: Two bipolar bars below each other

Question

I am currently creating a bipolar Barchart with AngularJs. As of now, the two series are displayed next to each other. This is what it currently looks like. How can I display them below each other, so they look like picture two?

This is what it should look like. I am using Chartist.

This is my 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);
});

This is the HTML-part.

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

Which parameters do I have to change in order to display my negative bars directly below the positive ones and not beside them?

Thank you very much in advance!

EDIT: Now it looks like this

Answer 1

This looks like an open issue on Chartist. Github issue

I would recommend to use other charting libraries (like highcharts).

If you are still looking for a fix (until this feature is introduced), I found a workaround by taking the following steps

1. Stack the negative series first
2. Stack positive values of the negative series next
3. Stack positive series next

Also you need to set stackBars to true for this to work.

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,

Working Example