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
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.
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.
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.
inset: {
anchor: 'top-right',
x: 250,
y: 50,
step: 5
}
Change to
inset: {
anchor: 'top-right'
}
Related
I would like to change the size of my legend because after using a position inset with bottom-left my legends elements doesn't have the same space between element:
https://user-images.githubusercontent.com/9460795/58431609-d9e77400-80ae-11e9-97c6-9efbd89bd558.png
I already tried to change the bar width but nothing happen
legend: { position: 'inset', padding: 10, inset: { anchor: 'bottom-left', x: -5, y: -50 - (20 * (this.selectedData.length - 2)), step: 1 }, item: { onmouseover: (id) => this.mouseOverLegendItem(id), onmouseout: (id) => this.mouseOutLegendItem(id), onclick: (id) => this.onmouseClickLegendItem(id) } }, bar: { width: 30 },
How can i fix it please ?
I'm newbi on c3 sorry :(
C3 version:"^0.6.13",
D3 version: "^5.9.1"
Unfortunately this fixed width seems to be baked into the positioning code when the legend is of type 'inset'. If you want the legend to display horizontally with no extra spacing between the items you're going to have to set the legend position as 'bottom'.
There is if you do that a hack whereby you can move that bottom legend into the chart area to mimic an inset though, but it's fairly brittle - see https://jsfiddle.net/5odf8w0x/
var chart = c3.generate({
data: {
columns: [
['data1ytuytuytutyuu', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 10, 20, 30, 40, 60, 70]
]
},
legend: {
position: 'bottom'
},
onrendered: function () {
console.log(this, this.config);
var x = +d3.select(this.config.bindto).select(".c3-legend-item text").attr("x");
x -= 70; // for axis and margin
d3.select(this.config.bindto).selectAll(".c3-legend-item").attr("transform", "translate(-"+x+",-50)");
}
});
I am using c3js to draw a line chart. x-axis displaying labels, which is rendered in between axis marker.
It is using axis.x.type : 'category'. otherwise the lines are not creating.
But I want to display it on x-axis marker, not in between them.
here is sample code
var chart = c3.generate({
data: {
x:'xaxis',
columns: [
['xaxis','cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category'
}
}
});
Here is sample code on jsfiddle https://jsfiddle.net/abhinaw/kyjgzd62.
Is there a way to do this?
Thanks
Use axis.x.tick.centered option:
axis: {
x: {
tick: {
centered: true
}
}
}
See updated fiddle.
Is there a way in C3.js for to add COLOR to an horizontal line, the level 0 in axis y in bar graphs? By default you have this graph:
What I need is this:
Any idea? thanks.
UPDATE: I've made a line with this, but I need to add color.
grid: {
y: {
lines: [
{value: 0, text: ''}
]
}
}
In case anyone need it, this does the magic:
https://github.com/c3js/c3/issues/362#issuecomment-46377069
The reference has an example for horizontal (x-axis) lines: https://c3js.org/samples/grid_x_lines.html
// Copied from the reference
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
],
axes: {
sample2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{value: 50, text: 'Label 50 for y'},
{value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
{value: 350, text: 'Label 350 for y', position: 'middle'}
]
}
}
});
Also for x-axis lines (vertical): https://c3js.org/samples/grid_x_lines.html
I'm creating a pie chart using nvd3 and angular-nvd3. I've got my legend displayed but it's in a row across the top.
I'd like to display it in a column down the left side.
I found http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview but when I use the options found in the .js file then all that does is change the look of the legend, not the placement.
The css file is empty and there doesn't seem to be inline css in the html. So I'm unsure how they placed the position of the legend on the right in a column.
I do see legendPosition: 'right' but when I use legendPosition: 'left' then the entire pie chart disappears.
So at the least how do I display in a column, and it would be great if I could change it to the left.
Options object:
$scope.patientsChart = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
return PatientStatuses[d.Key -1];
},
y: function (d) { return d.Value.length; },
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie: {
dispatch: {
//elementClick: function (e) { console.log(e) }
}
},
color: function (d) {
var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
return colors[d.Key - 1];
}
}
};
Directive for angular-nvd3:
<nvd3 options="FEV1Chart" data="patients"></nvd3>
If you want to rotateLabels in xAxis just add "rotateLabels: -45"
For example,
xAxis: {
axisLabel: 'Hours',
axisLabelDistance: 20,
showMaxMin: false,
rotateLabels: -45
},
I must remove the elements for the axis because I don't want to have empty space. I have to fit the graph in a panel.
I'm trying something like:
d3.select("g.c3-axis .c3-axis-y").remove();
d3.select("g.c3-axis-x").remove();
I printed this following selection in my console and it's all right but the remove doesn't work:
d3.select("svg").select(".c3-axis-x").selectAll("*").remove();
No results! What's the mistake ? I think that when I launch the function the chart is not completely generated, but I can't find a good solution to achieve the style desiderated.
I achieved the result in a different way, I fixed the padding for the axis in the chart.
axis:
{
x:
{
type: 'timeseries',
tick:
{
format : "%d-%m-%y"
},
show: false,
padding :
{
bottom : 0,
left: 0,
right: 0
}
},
y:
{
min: 0,
padding :
{
bottom : 0,
left: 0,
right: 0
},
tick:
{
values: [[0], [maxs]],
format: function (d) { return d3.format(',f')(d) +' kWh/h' }
},
show: false
}
},