Bar Chart with Negative Values

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

FAKE(csv(`day,profit,income,expenses
Mon,200,320,-120
Tue,170,302,-132
Wed,240,341,-101
Thu,244,374,-134
Fri,200,390,-190
Sat,220,450,-230
Sun,210,420,-210
`))

DROP(1) // drop header
MAPVALUE(1, parseFloat(value(1))) // parse float from string
MAPVALUE(2, parseFloat(value(2))) // parse float from string
MAPVALUE(3, parseFloat(value(3))) // parse float from string

CHART(
    chartOption({
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        legend: {
            data: ["Profit", "Expenses", "Income"]
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
        },
        xAxis: [
            {
                type: "value"
            }
        ],
        yAxis: [
            {
                type: "category",
                axisTick: {
                    show: false
                },
                data: column(0)
            }
        ],
        series: [
            {
                name: "Profit",
                type: "bar",
                label: {
                    show: true,
                    position: "inside"
                },
                emphasis: {
                    focus: "series"
                },
                data: column(1)
            },
            {
                name: "Income",
                type: "bar",
                stack: "Total",
                label: {
                    show: true
                },
                emphasis: {
                    focus: "series"
                },
                data: column(2)
            },
            {
                name: "Expenses",
                type: "bar",
                stack: "Total",
                label: {
                    show: true,
                    position: "left"
                },
                emphasis: {
                    focus: "series"
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            }
        ]
    })
)