Skip to content

Horizontal Bar Chart

Horizontal Bar Chart is a UI control that presents a given data series as an array of evenly spaced values in the form of horizontal bars. You can add multiple data sets. The width of the bar is proportional to the values. Multiple arrays can be provided to represent different data sets. When there are multiple arrays, each index of the array consists of groups that form a bar group. The bar groups are a set of bars that are relatively closer to each other and each bar corresponds to a value set.

Horizontal Bar Chart

Usage

<com.sap.cloud.mobile.fiori.chart.BarChartView
 android:id="@+id/barchart"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_margin="16dp"
 android:layout_marginTop="2dp"
 android:layout_marginBottom="5dp"
 android:background="#FFFFFF"
 android:paddingStart="@dimen/key_line_16dp"
 android:paddingEnd="@dimen/key_line_16dp"
 android:paddingBottom="40dp"
 app:chartlabelfont="f72_regular"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="@+id/guideline"
 app:legendenabled="true"
 app:xlabel="@string/Months"
 app:ylabel="@string/revenue_amount"
 app:headlineTextAppearance="@style/nodataMomentTextStyle"
 app:subheadlineTextAppearance="@style/nodataMomentTextStyle"
 app:headline_text="No Data Available"
 app:sub_headline_text="A description of the issue, such as resynching the app for data"/>
 </com.sap.cloud.mobile.fiori.chart.BarChartView>

Additional attributes allow you to modify the axis labels and chart properties:

  • Use xlabel and ylabel to specify default labels.
  • Use the legendenabled flag to turn the chart legend on and off.
  • Use the chartlabelfont attribute to set a different default font (the default font is f72_regular).
  • Use the headline_text to set the main no-data text title. This is a short title.
  • Use the sub_headline_text to set the description for no-data state.
  • Use the main_no_data_text to set the main no-data text.
  • Use the sub_no_data_text to set the description for no data
  • Use the headlineTextAppearance and subheadlineTextAppearance attributes to customize the headline and subheadline, respectively. The recommended approach is to extend the default FioriTheme and only customize the attributes you desire. This means that the other attributes will be retained and all the components in the application will have a consistent look and feel. For example:```

app:headlineTextAppearance="@style/nodataMomentTextStyle" app:subheadlineTextAppearance="@style/Test.ObjectCell.Subheadline"

<!-- Base application theme. -->
<style name="nodataMomentTextStyle" parent="FioriTheme">
    <item name="android:textColor">@color/colorPrimaryDark</item>
    <item name="android:textStyle">italic</item>
</style>
<com.sap.cloud.mobile.fiori.chart.BarChartView
 android:id="@+id/chart"
 android:layout_width="0dp"
 android:layout_height="0dp"
 android:layout_marginTop="60dp"
 app:xlabel="Months"
 app:ylabel="Revenue Amount ($)"
 app:legendenabled="true"
 app:chartlabelfont="f72_regular" />

Initializing BarChart

The following code initializes a BarChart.

BarChartView barChart = findViewById(R.id.chart);

Bar Chart Configuration APIs

Configuring X Labels

You can specify an array of labels to be used as X-axis labels for the graph. For example, use the code below to specify each data value distributed across Months. If there are n number of data points, each data point corresponds to a months[index*12/n] value.

List<String> months = Arrays.asList("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
barChart.setXLabels(months);

setXlabelOverlapEnable(Boolean enable)

This API enables or disables the X-label overlapping. By default, overlapping is disabled.

barChart.setXlabelOverlapEnable(true)

Set X Axis Direction

The X axis direction can be changed to conform to different right-to-left standards. For instance, in some cases it might be useful to set the X axis orientation from right to left.

setXAxisInverted(boolean inverted) Set the direction of the X axis. If true, the direction is right to left. If false, left to right.

barChart.setXAxisInverted(true)

Configuring Legend

setValueFormatter(SapLegendValueFormatter formatter)

Set formatting for the legend label values. This function is deprecated. Use setLegendValueFormatter instead (see below).

setLegendAlignment(FioriLegendComponent.ALIGNMENT alignment)

Set the LegendAlignment to LEFT, RIGHT, or CENTERED.

barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.LEFT);
barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.RIGHT);
barChart.setLegendAlignment(FioriLegendComponent.ALIGNMENT.CENTER);
barChart.setValueFormatter(
 new SapLegendValueFormatter() {
 @Override
 public String formatXValue(float value) {
 int labelSize = months.length;
 int labelPos = (int) ((value - barChart.getXChartMin()) * (labelSize-1) / column.getXRange());
 return months[labelPos];
 }

 @Override
 public String formatYValue(float v) {
 DecimalFormat format = new DecimalFormat("#,##0,000.00");
 return format.format(v);
 }
 @Override
 public String formatRangeValue(float v) {
 DecimalFormat format = new DecimalFormat("+#,##0,000.00; -#,##0,000.00");
 return format.format(v);
 }

 });

setLegendValueFormatter(SapLegendValueFormatter formatter)

Set formatting for the legend label values.

barChart.setLegendValueFormatter(
 new SapLegendValueFormatter() {
 @Override
 public String formatXValue(float value) {
 int labelSize = months.length;
 int labelPos = (int) ((value - barChart.getXChartMin()) * (labelSize-1) / barChart.getXRange());
 return months[labelPos];
 }

 @Override
 public String formatYValue(float v) {
 DecimalFormat format = new DecimalFormat("#,##0,000.00");
 return format.format(v);
 }
 @Override
 public String formatRangeValue(float v) {
 DecimalFormat format = new DecimalFormat("+#,##0,000.00; -#,##0,000.00");
 return format.format(v);
 }

 });

addLegendSummaryHeader(String header)

Add and set the text for the legend summary header.

barChart.addLegendSummaryHeader("My Summary Header");

setBarChartTitle(String chartTitle)

Set the text for the chart title.

barChart.setBarChartTitle("The Chart Title");

setStatusString(String statusString)

Set the text for the time stamp status string.

barChart.setStatusString("Updated a minute ago")

Configuring Y Axis

setYAxisValueFormatter(ValueFormatter formatter)

Set formatting for the Y axis values.

barChart.setYAxisValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                if (value == 0f) {
                    return "0";
                }
                int exp = (int) (Math.log(Math.abs(value)) / Math.log(1000));
                return String.format("%.0f%c",
                        (int) value / Math.pow(1000, exp),
                        " kMGTPE".charAt(exp));
            }

        });

setYLabels(List\<String\> labels)

Set a range of values for the Y label.

List<String> ylabel = Arrays.asList("Very Low", "Low", "Medium Low", "Medium High", "High", "Very High"};
barChart.setYLabels(ylabel);

setDefaultYGridSpacingEnabled(boolean enable)

This function enables or disables the default Y axis grid spacing. By default, MPAndroidChart calculates the spacing based on the given maximum Y value and minimum Y value. At times this may cause hard-to-format values to appear on the Y axis. Disabling this will allow the user to specify a preferred specific grid spacing value.

barChart.setDefaultYGridSpacingEnabled(enable);

setDefaultYGridSpacing(float gap)

This function sets a specific value for grid spacing. This is used in conjunction with setDefaultYGridSpacingEnabled.

barChart.setDefaultYGridSpacing(2000);

Configuring Data for Bar Chart

addDataSet(float[] values, String dataSetName)

Add a data set to the bar chart.

float[] values = new float[100];
for (int i = 0; i < values.length; i++) {
 float val = (float) (Math.random() * 5) ;
 values[i] = val * 1000.0f;
}
barChart.addDataSet(values, "2008");

updateGraph() Redraw the UI control with all of the changes to its properties applied and with a data set.

barChart.addDataSet(values, "2010");
barChart.updateGraph();

resetDataSet()

Reset all of the data sets.

barChart.resetDataSet();

Configuring Chart Area

setNoDataText(String text)

Sets the text that informs the user that there is no data available to display on an empty chart.

barChart.setNoDataText("No Data Provided");

setNoDataTextColor(int color)

Sets the color of the no data text.

barChart.setNoDataTextColor(Color.GREEN)

setNoDataTextSize(float size) Sets the text size for no data text.

barChart.setNoDataTextSize(size);

Last update: June 22, 2021