Is it possible to remove animations when I select data point on C3.js chart? I have selection enabled and duration set to 0, but it does not work - when I click on point animation is still made. My code:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
], selection: {enabled:true}
}, transition: {duration: 0}
});
chart.select(['data1'], [1,3,5]);
Thanks for every help!
Martin
You're using chart.transition, which is used for specifying the time/delay used when (eg) animating an addition of data to the chart.
What you're wanting is the point.focus.expand.enabled property, see:
http://c3js.org/reference.html#point-focus-expand-enabled
Here's an example:
http://jsfiddle.net/jrdsxvys/7/
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 it possible to create an Area range chart in C3.js similar to that of Highcharts? I've attached a screenshot and link to the live sample http://www.highcharts.com/demo/arearange-line.
The idea is to show range data, perhaps the historical high and low values, and then overlay the current year's values with a line chart. Can C3 do this?
Thanks in advance!
I don't think there is an area range graph option, but you might be able to fake it like so:
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 290, 225, 220],
['data2', 250, 320, 280, 250, 170, 180],
['data3', 230, 300, 240, 200, 150, 150]
],
types: {
data1: 'area',
data2: 'line',
data3: 'area'
},
colors: {
data1: 'rgb(215, 232, 248)',
data2: 'rgb(120, 178, 235)',
data3: '#ffffff'
}
},
point: {
r: 1
}
});
With css:
.c3-area {
opacity:1;
}
Here's a fiddle:
http://jsfiddle.net/ot19Lyt8/17/
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'
}
Can I please have some help to display data correctly on a bar graph in JQPlot. The data on the graph is not correct on the x axis. Please refer to my image down the bottom of this post.
Here is my code:
var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['May', 'June', 'July', 'August']
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});
And this is how it is currently displaying:
See this,Now it works fine.I think the issue is due to the missing of including the script files
http://jsfiddle.net/JWhmQ/1371/
HTML
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<div id="CustomerRepeatVisitRatesGraph"></div>
Bar chart code
var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['May', 'June', 'July', 'August']
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1.05,
tickOptions: {formatString: '$%d'}
}
}
});