Login/Register
Is there any way to change a label with c3js?
Asked Answered
Solved d3.jsc3.js
S

2

5

I am using the new c3js library. Is there any way to change a label for a piece of data in the chart? I have a bar chart where each bar is a dollar value. I want the labels for each bar to be $100 instead of 100. If I set the value to $100 then the library cannot make the chart. Is there any way to change the label -- if not the underlying value?

Samite answered 12/5, 2014 at 22:10 Comment(0)
B
9

You can specify the formatting for both the Data Labels and the Axis Ticks. Have a look at the example below.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./css/c3.css">
        <script src="./js/d3.min.js"></script>
        <script src="./js/c3.min.js"></script>
    </head>
    <body>
    <div class='chart'>
    <div id='chart'></div>
    </div>
    <script>
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'bar',
                labels: {
                    format: {
                        y: d3.format("$,")
                        //y: function (v, id) { return "Custom Format: " + id; }
                    }
                }
            },
            axis : {
                y : {
                    tick: {
                        format: d3.format("$,")
                        //format: function (d) { return "Custom Format: " + d; }
                    }
                }
            }
        });
    </script>
    </body>
</html>

The resulting graph looks like this.

Check out the formatting options in d3.js or you can write your own function (see commented out code above).

Bevis answered 13/5, 2014 at 1:6 Comment(0)
I
6

You can also show values as string : http://c3js.org/samples/data_stringx.html

var chart = c3.generate({
    data: {
        x : 'x',
        columns: [
            ['x', '$100', '$200', '$300', '$400'],
            ['download', 30, 200, 100, 400],
            ['loading', 90, 100, 140, 200],
        ],
        groups: [
            ['download', 'loading']
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'categorized' // this is needed to load string x value
        }
    }
});
Irredeemable answered 21/5, 2014 at 6:59 Comment(2)
if i include x:'x' inside data, i will get errors d3.v3.min.js:1 Error: Invalid value for <rect> attribute x="NaN"a @ d3.v3.min.js:1(anonymous function) @ d3.v3.min.js:3Y @ d3.v3.min.js:1Aa.each @ d3.v3.min.js:3Aa.attr @ d3.v3.min.js:3redraw @ c3.js:1417init @ c3.js:1289c3.generate @ c3.js:1972(anonymous function) @ c3-chart.init.js:135c @ jquery.js:4p.fireWith @ jquery.js:4x.extend.ready @ jquery.js:4q @ jquery.js:4 14d3.v3.min.js:1 Error: Invalid value for <rect> attribute width="NaN"u @ d3.v3.min.js:1(anonymous function). can you tell me why – Elaelaborate
@codelearner, one thing that can be a reason is that axis part is inside data, but it shouldn't be there. Check carefully for the correct nesting. This example works. – Shang

© 2022 - 2024 — McMap. All rights reserved.