Top Right Legend Position for a C3 chart?

Question

Is there a way to position the legend in 'top right' for c3 charts?

The current options appear to only allow 'bottom' and 'right'. I've noticed there is a 'Custom Legend Option'. However, I wanted to check before proceeding down this path.

Thanks

Friday

Just implemented the Custom Legend Option, and it allowed me to position (and style) the legend any way I want – Friday

Answer 1

I have a same issue. So I spent many time to find the solution. And Finally, I got the solution. Here is the solution.

Document

C3 Document is not bad, but some example is incomplete. Position of legend is one of them.

The example show position of legend can be located in only bottom, right and inset. That's all. But in the document, you can find more possibility.

Look at the c3.legend.position in the document. The document says again legend can be located in only bottom, right and inset. But don't be disappointed. Look at the below item, c3.legend.inset. And today, that item will save our time.

Code

First of all, look at the example.

legend: {
  inset: {
    anchor: 'top-right'
    x: 20,
    y: 10,
    step: 2
  }
}

You see it? That's a top-right you want. And code works wonderfully. If you change anchor, the position of legend'll be changed. And you can adjust coordinates with x and y. And step may be adjust length of legend. If you increase it, then legend'll be longer. But it's my guess. Please someone explain more about it.

Example

Here is my example.

var appActivityChart = c3.generate({
    data: {
        //...
    },
    legend: {
        show: true,
        position: 'inset',
        inset: {
            anchor: 'top-right',
            x: 250,
            y: 50,
            step: 5
        }
    }
});

---

I hope C3 add or refer about c3.legend.inset. Current example is too complicated. Until that time I hope this answer can save your time. Have great coding.

Unwearied

Great answer. In the example it is not clear that position: 'inset' is required. Your answer makes that clear here. Thanks. – Yellowbird

Answer 2

I have same question and found next solution to place legend above chart:

legend: {
    position: 'inset',
    inset: {
        anchor: 'top-left',
        x: 20,
        y: -40,
        step: 1
    }
},
padding: {
    top: 40
}

And legend will not cover chart.

Romanticize

Answer 3

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
     legend: {
        show: true,
        position: 'inset',
        inset: {
            anchor: 'top-right',
            x:undefined,
            y: undefined,
            step: undefined
        }
    }
});

Replaced undefined in x,y and step . The legend is display on top right.

Novia

Answer 4

  inset: {
            anchor: 'top-right',
            x: 250,
            y: 50,
            step: 5
        }

Change to

  inset: {
            anchor: 'top-right'
        }

Cudweed