Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
262 views
in Technique[技术] by (71.8m points)

angularjs - Change origin from zero to one in c3 graph

I want to change the origin of the c3 bar graph from zero to one.All the values must be drawn from one not from zero.For better understanding i have attached an image.Rotated bar chart

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There is no config/easy way to change the origin from (0,0) to something different(0,100).

So the alternate/easy way to do this is by changing the axis tick labels and putting grid lines, and manipulating the data values, as shown below:-

In below example, I have tried to move the origin(x-axis from 0 to 100)

Hope this helps.

var chart = c3.generate({
  bindto:'#chart_example',
    data: {
        columns: [
            //['data1', 0, 200, -100, 400, 150, -250, 50, 100, 250] // Actual values
            ['data1', -100, 100, -200, 300, 50, -350, -50, 0, 150]   // actual values -100
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
            show: false,
        },
        y : {
            tick: {
                //format: d3.format("$,")
                format: function (d) { return "$" + (d+100); }
            }
        }
    },
    grid: {
        y: {
            lines: [
                {value: 0, text: ''},
            ]
        }
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div id="chart_example"/>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...