Show TOC

Properties of MAKit ChartsLocate this document in the navigation structure

SAPUI5 provides several attributes to support the configuration of MAKit charts.

  • categoryAxis is used to configure the property of the chart's value axis. It must be an instance of sap.makit.CategoryAxis. It is usually used for the X axis, but may also be used for the Y axis in certain chart types, such as the horizontal bar chart. You can modify some generic properties such as showLabel, showPrimaryLine, and so on. You can also modify properties specific for category axis such as sortOrder.

  • valueAxis is used to configure the property of the chart's value axis. It must be an instance of sap.makit.CategoryAxis. You can also modify some of the generic properties such as showLabel, showPrimaryLine, and so on. You can also modify specific value axis properties, such as min or max value of the axis.

  • valueBubble is used to configure the property of the chart's value bubble. It must be an instance of sap.makit.CategoryAxis. A value bubble is the pop-up sliding box that shows the details of a highlighted chart item. You can modify its properties, such as position, showCategoryDisplayName, and so on.

If you do not specify a property at creation time, the chart creates a default instance of each property by default. To specify a property, proceed as follows:

var oChart = new sap.makit.Chart({
    width : "100%", height : "80%",
    category : new sap.makit.Category({ column : "yearCategory" }),
    series : new sap.makit.Series({ column : "productSeries" }),
    values : [new sap.makit.Value({ expression : "revenueValue", format : "currency" })]
    categoryAxis : new sap.makit.CategoryAxis({ displayLastLabel: true }),
    valueBubble : new sap.makit.ValueBubble({
        style: sap.makit.ValueBubbleStyle.FloatTop,
        showCategoryText: true
    }),
});

You can also modify the properties at runtime, after the chart has been created. Proceed as follows:

oChart.getValueBubble().setShowCategoryText(false);
oChart.getCategoryAxis().setDisplayLastLabel(false);

.