Column charts do not show negative values in android and ios application

Question

We have a 1-year paid membership to anychart and we use column charts in my screens. But we want to show negative values on columns like as below:

But our negative values are shown as zero value like as belows:

When we show negative values, the x-axis shifts upward. ​No additional code has been written to display negative values in charts written in JavaScript.We cannot show negative values in Android and iOS applications.Can you share a java or swift sample code block where we can show negative values on column chart ?

We use below github code. I would appreciate it if you could make corrections to the code below. https://github.com/AnyChart/AnyChart-Android/blob/master/sample/src/main/java/com/anychart/sample/charts/ColumnChartActivity.java

package com.anychart.sample.charts;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

import com.anychart.AnyChart;
import com.anychart.AnyChartView;
import com.anychart.chart.common.dataentry.DataEntry;
import com.anychart.chart.common.dataentry.ValueDataEntry;
import com.anychart.charts.Cartesian;
import com.anychart.core.cartesian.series.Column;
import com.anychart.enums.Anchor;
import com.anychart.enums.HoverMode;
import com.anychart.enums.Position;
import com.anychart.enums.TooltipPositionMode;
import com.anychart.sample.R;

import java.util.ArrayList;
import java.util.List;

public class ColumnChartActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chart_common);

        AnyChartView anyChartView = findViewById(R.id.any_chart_view);
        anyChartView.setProgressBar(findViewById(R.id.progress_bar));

        Cartesian cartesian = AnyChart.column();

        List<DataEntry> data = new ArrayList<>();
        data.add(new ValueDataEntry("Column 1", 48));
        data.add(new ValueDataEntry("Column 2", -45));
        data.add(new ValueDataEntry("Column 3", 26));
        data.add(new ValueDataEntry("Column 4", 11));
        data.add(new ValueDataEntry("Column 5", 12));
        data.add(new ValueDataEntry("Column 6", 60));
        data.add(new ValueDataEntry("Column 7", -30));
        data.add(new ValueDataEntry("Column 8", 50));
        data.add(new ValueDataEntry("Column 9", 60));

        Column column = cartesian.column(data);

        column.tooltip()
                .titleFormat("{%X}")
                .position(Position.CENTER_BOTTOM)
                .anchor(Anchor.CENTER_BOTTOM)
                .offsetX(0d)
                .offsetY(5d)
                .format("${%Value}{groupsSeparator: }");

        cartesian.animation(true);
        cartesian.title("Top 10 Cosmetic Products by Revenue");

        cartesian.yScale().minimum(0d);

        cartesian.yAxis(0).labels().format("${%Value}{groupsSeparator: }");

        cartesian.tooltip().positionMode(TooltipPositionMode.POINT);
        cartesian.interactivity().hoverMode(HoverMode.BY_X);

        cartesian.xAxis(0).title("Product");
        cartesian.yAxis(0).title("Revenue");

        anyChartView.setChart(cartesian);
    }
}

Thanks for your suggestions.

Answer 1

To make your chart's Y-axis show negative values, you can specify its minimum and maximum values.

// Set yScale's minimum and maximum values to show negative values
cartesian.yScale().minimum(-100).maximum(100);

Regarding the X-axis position changing, it is not possible to translate it to the center.
However, mimicking the axis with a custom horizontal line is possible.

// Create a line marker for the centered axis line
Cartesian line = cartesian.lineMarker(2, "{stroke: 'lightgrey'}");

Then all you have to do is disable the default X-axis.

// Disable the default xAxis
cartesian.xAxis(0).enabled(false);

In the end, you will have a similar chart:

In case if you need more detailed information - please refer to the Documentation and API reference
Marker lines API reference
Marker lines docs