Cuba Platform Charts: vertical alignment

Question

Hello I build a Cuba chart for my dashboard and have two questions:

1. How can I make the serial chart vertical?
2. How can I remove the red balloon?
3. Why goes the x-axis from 10 to 20? There should be the category "dokumentiert" instead.

Here is my XML:

 <chart:serialChart id="stackedArea"
                               height="100%"
                               marginLeft="0"
                               marginTop="10"
                               plotAreaBorderAlpha="0"
                               width="100%">
                <chart:chartCursor cursorAlpha="0"/>
                <chart:legend equalWidths="false"
                              periodValueText="total: [[value.sum]]"
                              position="TOP"
                              valueAlign="LEFT"
                              valueWidth="100"/>
                <chart:valueAxes>
                    <chart:axis axisAlpha="0"
                                position="LEFT"/>
                </chart:valueAxes>
                <chart:balloon adjustBorderColor="false"
                               color="WHITE"
                               horizontalPadding="10"
                               verticalPadding="8"/>
                <chart:graphs>
                    <chart:graph fillAlphas="0.6"
                                 type="COLUMN"
                                 lineAlpha="0.4"
                                 title="dokumentiert"
                                 valueField="anzahl"/>
                </chart:graphs>
                <chart:categoryAxis axisColor="#DADADA"
                                    axisAlpha="0"
                                    startOnAxis="true"
                                    gridPosition="START">
                </chart:categoryAxis>
                <chart:export/>
            </chart:serialChart>

Here is my controller:

public class Balkendiagramm extends ScreenFragment {
    @Inject
    private SerialChart stackedArea;
    @Inject
    private KeyValueCollectionLoader filesDl;
    @Inject
    private KeyValueCollectionContainer filesDc;

    @Subscribe
    public void onInit(InitEvent event) {
        filesDl.load();
        stackedArea.setDataProvider(new ContainerDataProvider(filesDc));
        stackedArea.setCategoryField("dokStatus");
    }
}

Answer 1

The red balloon can be disabled by using categoryBalloonEnabled="false":

<charts:chartCursor categoryBalloonEnabled="false"/>

or just remove <charts:chartCursor/> itself.

I assume that the dokStatus property has an enumeration type. You can try to define enumeration class in your KeyValueCollection property:

<keyValueCollection id="keyValueDc">
    ...
    <properties>
        ...
        <property name="dokStatus" class="com.company.myapp.entity.Status"/>
    </properties>
</keyValueCollection>

In this case, you will get a localized enum value in the Chart category. Also, you don't have to set data provider for KeyValueCollection in the controller because the chart's dataContainer attribute supports it:

<charts:serialChart id="stackedArea"
                    dataContainer="keyValueDc"
                    categoryField="docStatus"