[SOLVED] Nativescript chart how to show bar graph with negative values

Nativescript chart how to show bar graph with negative values

I want my bar graph to always start at zero and go up if positive and down if negative. But the bar starts at the minimum range and goes up. How do I make my bars on my graph start at zero and pivot up or down depending if the value is positive or negative?

Here is my code:

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="existing" seriesName="existing" legendTitle="Existing Members"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="onhold" seriesName="onhold" legendTitle="On Hold"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="new" seriesName="new" legendTitle="New Membership"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="rejoin" seriesName="rejoin" legendTitle="Rejoins"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="expired" seriesName="expired" legendTitle="Expired"></BarSeries>
    <BarSeries tkCartesianSeries stackMode="Stack" [items]="memberByMonthSource" categoryProperty="month" valueProperty="cancelled" seriesName="cancelled" legendTitle="Cancelled"></BarSeries>

    <Palette tkCartesianPalette seriesName="existing">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(121,50,232,0.15)" strokeColor="rgba(121,50,232,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="onhold">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(255,215,0,0.15)" strokeColor="rgba(255,215,0,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="new">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(16,119,241,0.15)" strokeColor="rgba(16,119,241,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="rejoin">
            <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(135,193,132,0.15)" strokeColor="rgba(135,193,132,0.5)" strokeWidth="1"></PaletteEntry>
        </Palette>
    <Palette tkCartesianPalette seriesName="expired">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(119,119,119,0.15)" strokeColor="rgba(119,119,119,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
    <Palette tkCartesianPalette seriesName="cancelled">
        <PaletteEntry tkCartesianPaletteEntry fillColor="rgba(255,153,153,0.15)" strokeColor="rgba(255,153,153,0.5)" strokeWidth="1"></PaletteEntry>
    </Palette>
</RadCartesianChart>

expired and cancelled serials have negative values.

Solution

Try adding minimum and maximum properties to the linear axis like this:

<LinearAxis tkCartesianVerticalAxis minimum="-50" maximum="50"></LinearAxis>