I am trying to change the units of a gauge chart. Instead of showing the % value by default, I would like to show the exact value. I looked for that in the documentation but it is incomplete and I am not sure which value I should put in the code to change it.
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['data', 15.0]
],
type: 'gauge',
},
gauge: {
min: 50,
max: 100,
units: '%' //I want to change that
}
});
I am answering myself. To get the exact value and not the % one in a gauge chart, it is necessary to add this lines:
var chart = c3.generate({
bindto: "#chart",
data: {
columns: [
['data', 15.0]
],
type: 'gauge',
},
gauge: {
label:{
format: function(value, ratio){
return value; //returning here the value and not the ratio
},
},
min: 50,
max: 100,
units: '%' //this is only the text for the label
}
});
Related
I need to visualize the bar chart with Javascript. So I'm used C3 JS to visualize the chart. Simply I'm using this Bar chart as follows,
<div id="chart"></div>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,") // ADD
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
</script>
But the problem is when X-axis consists of the large data set Chart getting cramped. I have more than 700 data.
Have any possible way to avoid this? can I add scroll bar between primary and secondary X-axis?
Google, such a wonderfull thing ;)
https://c3js.org/samples/interaction_zoom.html
or this
C3 / D3 bar chart with horizontal scroll
I have data to display on c3.js graph and there is one piece of data which is smaller than other ones.
For exmaple A can by 140 000, B 20 000 and C 700. C can even be negative.
The problem is that when I display my data on the chart you can't really see the dynamics of C because its' values are too little for scale of the graph. If C is negative it doesn't show on the graph at all.
Is there some way to scale the graph that way so all data displayed properly?
const chartConfig = {
bindto: $element.find('.canvas')[0],
data: {
json: [],
keys: { value: [] },
type: 'line'
},
grid: {
x: {
get: getXGrid
}
},
axis: {
y: { min: 0 },
x: {
tick: {
culling: false,
format: formatXAxis
}
},
y2: {
padding: {top: 0, bottom: 0},
min : 0,
max : 100,
tick : {
format: (value) => `${value}%`
}
}
}
};
Later in one of my methods I set Y max to be the biggest number in data.
chartConfig.axis.y.max = getRoundMax(chartConfig.data);
UPD link
You must be looking for logarithmic scale.
At this moment c3.js does not support for it out-of-the-box.
But there are some workarounds at github:
First, they convert values:
data_test_original = ['data1', 140000, 20000, 700, 10, 100, 1000, 3, 500, 50, 5, 3000]
data_test = ['data1'];
for(var i=1; i<data_test_original.length; i++){
data_test[i] = Math.log(data_test_original[i]) / Math.LN10;
}
Then, they use it alongside with adjusted Y-axis:
c3.generate({
data: {
...
columns: [ data_test ]
},
...
axis : {
y : {
tick: {
format: function (d) { return Math.pow(10,d).toFixed(0); }
}
}
}
});
See full example here or there. Hope this will suit your needs.
I look for way to use polarArea but with limit scale (line of tick) defined at 100. Actualy the scale display scale based in max value, but I want max fixed.
var data = {
datasets: [{
data: [10,20,30,40],
}],
labels: ["Red","Green","Yellow","Grey","Blue"]
};
var polarArea = new Chart(ctx, {
data: data,
type: 'polarArea',
options: {
scale: {
ticks: {
beginAtZero: true
}
}
}
});
This marked with arrow green as I want the graph.
Can you help me?
var data = {
datasets: [{
data: [10,20,30,40],
}],
labels: ["Red","Green","Yellow","Grey"]
};
var polarArea = new Chart(ctx, {
data: data,
type: 'polarArea',
options: {
scale: {
ticks: {
min: 0,
max: 100
}
}
}
});
A JSFiddle would be super helpful for your exact situation, but based on the information provided, this should do it for you. http://jsfiddle.net/andrewborem/vup9o5fx/
I have the following bar chart in c3.js (here's a fiddle):
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: '#FF0000'
},
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.
I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).
I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.
Any help would be appreciated. Thanks!
I'm not sure what you did inside color: function, but it is the correct way to set it up. Regarding your desired gradient, it cannot be achieved by just increasing its hex value because going from yellow to green requires decreasing the value. The following example goes from red to yellow:
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: function(d) {
return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
}
},
},
axis: {
x: {
type: 'category
}
},
legend: {
show: false
}
});
fiddle
you can adding in your css like a
.c3-bar-0 {
fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
fill: rgb(0, 255, 204)!important;
}
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});