Currently I have a line chart with 2 columns on it. I'm always showing labels because I want it to show right away the details.
The problem is, when the value of the 1st column matches with the value of the 2dn column the labels overlap.
Is there a way to show the label for column 1 always ABOVE the first line and show the label for column 2 always BELOW the second line?
This is what I got right now:
var chart1 = c3.generate({ //large devices
bindto: '#chart',
data: {
columns: [
['Col1', -0.7, -0.1, 4.6, -2.0, 4.2, 4.3, 5.4, 5.0, 0.6, 4.2, 4.9, 2.8, 2.7],
['Col2', -1.5, -0.9, 4.0, -2.5, 3.7, 4.0, 5.1, 4.8, 0.6, 4.2, 4.9, 2.8, 2.7]
],
labels:{
format: function(value){
return value + '%'
}
}
},
axis: {
x: {
type: 'category',
categories: ['Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17', 'Jan-18', 'Feb-18']
},
y: {
show: false,
min: -8,
max: 8
},
},
grid: {
y: {
lines: [{
value: 0
}]
}
},
size: {
height: 240
}
});
I tried to set the Y position on the onredered method but label doesn't have a y prop.Also, I can't get the dot position, so I wouldn't know if the current Y position is above or below the line.
You can set y axis label and change its position by this option
y: {
label: {
text: 'Your Y Axis',
position: 'outer-middle'
}}
Check the official documentation for more info: http://c3js.org/reference.html#axis-y-label
Related
I use canvasJS to make a line graph report, the issue now is it didn't show properly in tooltip using yValueFormatString.
my goal is to display the value:
{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.## %",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}
in tooltip, it shows
1278 %
1279 %
1280 %
I think there's something wrong with it, I wanted to display like:
12.78 %
12.79 %
12.80 %
any idea?
According to documentation, "%" Multiplies a number by 100 i.e. 12.78("##.## %") => 1278%. Instead setting yValueFormatString to "##.#0 '%'" should work fine in this case.
Here is an example:
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type:"stepLine",
name: "title",
showInLegend: true,
connectNullData: true,
yValueFormatString: "##.#0 '%'",
dataPoints: [
{ x: new Date(2019, 1, 20), y: 12.78 },
{ x: new Date(2019, 1, 19), y: 12.79 },
{ x: new Date(2019, 1, 18), y: 12.80 },
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="width: 100%; height: 260px"></div>
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.
I would like to format the y axis to display percentages. If I don't change the y axis format it displays the values perfectly but if I add the y axis modifier lines the values appear at the y axis.
This is the code: https://jsfiddle.net/3pssrmjm/
and this is the y axis modifier code:
axis:{
y: {
tick:{
format: d3.format('%')
}
}
}
Small change. You had 2 separate axis objects, the second was overriding the first.
chart = c3.generate({
data: {
x: 'time',
xFormat: '%Y-%m-%d',
json: [{
"time": "2016-07-27",
"Fehérje": 0.69,
"Szénhidrát": 1.22,
"Na": 2.47,
"Ca": 0.32,
"Ka": 0.3,
"Zsír": 1.46,
"P": 0.66
}, {
"time": "2016-07-16",
"Fehérje": 0.06,
"Szénhidrát": 0.12,
"Na": 1,
"Ca": 0.05,
"Ka": 0.01,
"Zsír": 0.02,
"P": 0.13
}, {
"time": "2016-07-02",
"Fehérje": 0.44,
"Szénhidrát": 0.32,
"Na": 2.12,
"Ca": 0.47,
"Ka": 0.7,
"Zsír": 0.68,
"P": 0.39
}],
keys: {
x: 'time',
value: ['Szénhidrát', 'Zsír', 'Na', 'Ca', 'K', 'P']
}
},
axis: {
x: {
type: "timeseries",
tick: {
format: '%m-%d'
}
},
y: {
tick:{
format: d3.format('%')
}
}
},
line: {
connectNull: true
}
});
And a fiddle: https://jsfiddle.net/f47r3fxm/
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
}
},
In a HighCharts scatterplot I want to move a point from its position to another one using a smooth animation.
For example, in the scatteplot defined in the following code (jfiddle link):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
min: -0.5,
max: 5.5
},
yAxis: {
min: 0
},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'scatter',
name: 'Observations',
data: [[1, 1.5], [2.8, 3.5], [3.9, 4.2]],
marker: {
radius: 4
}
}]
});
});
});
I want to move the first point from (1,1.5) to (2,2). Is it possible?
Yes, use point.update.
This accepts point options as parameter, so you can pass x and y values.
Take a look the following code:
chart.series[0].points[0].update({x: 2, y: 2});
Pass an object as the third parameter with your animation options, you can see the options on the refference section.
chart.series[0].points[0].update({x: 2, y: 2}, true, {duration: 500, easing: 'linear'});
Reference:
http://api.highcharts.com/highstock#Point.update()
animation types
Demo