c3.js stacked area graph with negative values

Navigation
1

I'm doing a stacked area chart with c3.js, but the graph does not look good when negative values are used.

Example (Also available in JSFiddle ): 

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 50, 300, 0, 0, 120],
            ['data2', 130, 100, 140, 200, 150, 50],
            ['data3', 230, -200, 50, 200, 150, 50]
        ],
        types: {
            data1: 'area-spline',
            data2: 'area-spline',
            data3: 'area-spline'
            // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
        },
        groups: [['data1', 'data2','data3']]
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css" />

<div id="chart"></div>

Any ideas?

    
asked by goingmad 04.07.2016 в 09:45
source

1 answer

0

An area can never be negative. Therefore, a graph of type area-spline is not a good type of graph to represent your data.

Think better about how you want to represent your data and choose the appropriate chart type.

    
answered by 04.07.2016 в 10:03
query from transact sql to linq Show view with variable content mvc [closed]