Top Right Legend Position for C3 Chart?

Question

Is there a way to place the legend in the "upper right" for c3 diagrams?

The current options seem to allow only "bottom" and "right". I noticed that there is a Custom Custom Legend option. However, I wanted to check before going this way.

thanks

Answer 1

I have the same problem. So I spent a lot of time to find a solution. And finally, I got a solution. Here I will share this decision.

Document

C3 document is good. But such an example. That's right, the example does not show everything about C3. And the position of the legend is one of them.

An example shows that the position of a legend can only be located at the bottom, right and inset . All this. But in the document you can find more options.

Look at c3.legend.position in the document. The document says that again the legend can only be located bottom, right and inset . But do not be disappointed. See below, c3.legend.inset . And today this element will save our time.

The code

First of all, look at an example.

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

You see? This is what you need top-right . And the code works wonderfully. If you change the anchor , the position of the legend will be changed. And you can adjust the coordinates using x and y . A step can be adjusted the length of the legend. If you increase it, the legend will be longer. But this is my hunch. Please someone explain more about this.

Example

And I coded as shown below. 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 that C3 will add a link to c3.legend.inset . The current example is causing some confusion. Until then, I hope this can save you some time. Great encoding.

Answer 2

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

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

And the legend will not cover the chart.

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 in step. The legend is displayed on the top right.