I am using the new c3js library. Is there any way to change a label for a piece of data in the chart? I have a bar chart where each bar is a dollar value. I want the labels for each bar to be $100 instead of 100. If I set the value to $100 then the library cannot make the chart. Is there any way to change the label -- if not the underlying value?
You can specify the formatting for both the Data Labels and the Axis Ticks. Have a look at the example below.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/c3.css">
<script src="./js/d3.min.js"></script>
<script src="./js/c3.min.js"></script>
</head>
<body>
<div class='chart'>
<div id='chart'></div>
</div>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar',
labels: {
format: {
y: d3.format("$,")
//y: function (v, id) { return "Custom Format: " + id; }
}
}
},
axis : {
y : {
tick: {
format: d3.format("$,")
//format: function (d) { return "Custom Format: " + d; }
}
}
}
});
</script>
</body>
</html>
The resulting graph looks like this.
Check out the formatting options in d3.js or you can write your own function (see commented out code above).
You can also show values as string : http://c3js.org/samples/data_stringx.html
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', '$100', '$200', '$300', '$400'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'categorized' // this is needed to load string x value
}
}
});
Related
I am using the new amcharts5 and I cannot seem to change my pie chart "slice" and label to a pure number despite referencing my old code and other links.
Basically my code and chart loads, but the issue is my values is depicted in percentages instead of numbers. This is my code below where I tried to address this.
Any assistance will be appreciated.
// Set data
series.data.setAll([
{ value: Type[0], category: "Type 1" },
{ value: Type[1], category: "Type 2" },
{ value: Type[2], category: "Type 3" },
]);
// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.labels.template.text = "{category}: {value.value}";
legend.slices.template.tooltipText = "{category}: {value.value}";
chart.legend.valueLabels.template.text = "{value.value}";
legend.data.setAll(series.dataItems);
Regards
v5 is completely different from v4, API-wise. In order to configure the pie chart's legend, you have to set it inside the series as documented here:
let series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
categoryField: "country",
valueField: "sales",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
Tooltips need to be set on the slices using set or setAll (see the settings documentation for more info):
series.slices.template.set('tooltipText', '{category}: {value}');
Similarly for the slice labels, set the text property using the above functions:
series.labels.template.set('text', '{category}: {value}');
Demo:
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalLayout
})
);
var data = [{
country: "France",
sales: 100000
}, {
country: "Spain",
sales: 160000
}, {
country: "United Kingdom",
sales: 80000
}];
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
valueField: "sales",
categoryField: "country",
legendLabelText: "{category}",
legendValueText: "{value}"
})
);
series.slices.template.set('tooltipText', '{category}: {value}');
series.labels.template.set('text', '{category}: {value}');
series.data.setAll(data);
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.percent(50),
x: am5.percent(50),
marginTop: 15,
marginBottom: 15
}));
legend.data.setAll(series.dataItems);
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>
How can I achieve this grid and label colors. I can find some answers on label colors but nothing on changing the grid color to the one shown in the screenshot, instead of the default black one.
Just in case you need my working code:
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', ...xAxis],
['total', ...yAxis],
],
type: 'bar',
colors: {
total: d3.rgb(40,162,245)
},
empty: { label: { text: "No Data Available" }}
},
axis: {
x: {
tick: {
culling: {
max: 31,
},
},
},
y: {
tick: {
format: (x) => x / 1000 + 'k',
},
},
},
grid: {
y: {
show: true,
color: '#fff'
},
},
})
Try to use selector .c3 path, .c3 line:not([stroke-width="10"]) for lines, and tspan for text.
.c3 line[stroke-width="10"] is used for legend squares, it needs be excluded.
Also see How to get rounded corner in c3js bar charts
const xAxis = [10, 20, 40];
const yAxis = [2000, 1420, 1000];
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', ...xAxis],
['total', ...yAxis],
],
type: 'bar',
colors: {
total: d3.rgb(40,162,245)
},
empty: { label: { text: "No Data Available" }}
},
axis: {
x: {
tick: {
culling: {
max: 31,
},
},
},
y: {
tick: {
format: (x) => x / 1000 + 'k',
},
},
},
grid: {
y: {
show: true,
color: '#fff'
},
},
})
.c3 path, .c3 line:not([stroke-width="10"]) {
stroke: gold !important;
}
tspan {
stroke: green !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js" integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="chart">
when I click on pyramid chart then it will be expand, how to disable expand area of pyramid chart.
You need to set explodeOnClick to false to disable exploding of sections in CanvasJS funnel / pyramid chart. Setting interactivityEnabled property to false, as mentioned by user14299292 will remove complete interactivity of chart - doesn't show toolTip aswell. Below is an example.
var chart = new CanvasJS.Chart("chartContainer", {
data: [{
type: "pyramid",
explodeOnClick: false, //**Change it to true
dataPoints: [
{ y: 10, indexLabel:"Research & Design" },
{ y: 12, indexLabel:"Manufacturing" },
{ y: 8, indexLabel:"Marketing" },
{ y: 8, indexLabel: "Shipping" },
{ y: 15, indexLabel:"Retail" }
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
try this
var chart = new CanvasJS.Chart("container",
{
.
.
interactivityEnabled: false,
.
.
});
chart.render();
I have three time series which are plotted on the same graph using null values so that only one series is displayed for any one time, basically to get different colouring for rising and falling points.
Does anyone know how I can link the points together with lines even though they are from different series? I know with a bar chart you can use a group feature for different series to have them display on top of each other, however this doesn't seem to work for line. Here is a picture of the unconnected dots:
If you present the data to C3 as separate series with nulls where the series should not plot, then you get something like your required affect. In this snippet I have used two series - you would want a series per rising and falling set of points.
var chart = c3.generate(
{
bindto: '#chart',
size: {
width: 600,
height: 180
},
data: {
x: 'xLabels',
columns: [
['xLabels', '2015-09-17 00:00:00','2015-09-18 00:00:00','2015-09-19 00:00:00','2015-09-20 00:00:00','2015-09-21 00:00:00','2015-09-22 00:00:00','2015-09-23 00:00:00','2015-09-24 00:00:00'],
['data1', 5,10,12,17,null,null,null,null],
['data2', null,null,null,null,17,13,12,11],
['data3', null,null,null,17,17,null,null,null],
],
xFormat: '%Y-%m-%d %H:%M:%S', // ### IMPORTANT - this is how d3 understands the date formatted in the xLabels array
types: {
'data1': 'area-spline',
'data2': 'area-spline',
'data3': 'line'
},
colors: {
data3: '#cccccc'
}
},
point: {
show: true
},
legend: {
position: 'inset',
inset: {
anchor: 'top-left',
x: 20,
y: 10,
step: 2
}
},
axis: {
y: {
tick: {
format: function (d) { return d + "%"; }
}
},
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d' // how the date is displayed
}
}
},
tooltip:{
format:{
title:function (x) { return x.getDate() + "/" + x.getMonth() + "/" + x.getFullYear() + " " + x.getHours()+ ":" + x.getMinutes() },
}
}
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.7/c3.min.js"></script>
<div class='chart-wrapper'>
<div class='chat' id="chart"></div>
</div>
I have made a stacked bar chart using c3 libraries and would like to add icons to each column (using c3 or d3). I went through their documentation but there doesnt seem to be any relevant functionality!
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100],
['data2', 130, 100, 140]
],
type: 'bar',
groups: [['data1', 'data2']]
},
});
You can import font-awesome and then (mis)use c3's label format configuration to set an icon for each series
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: {
// format: function (v, id, i, j) { return "Default Format"; },
format: {
data1: function (v, id, i, j) { return "\uf1ec"; }, // a calculator
data2: function (v, id, i, j) { return "\uf212"; }, // a book
data3: function (v, id, i, j) { return "\uf1ae"; }, // a human
}
}
},
grid: {
y: {
lines: [{value: 0}]
}
}
});
You'll need this css rule -->
.c3-chart-text .c3-text {
font-family: 'FontAwesome';
}
And to import the FontAwesome css to get access to the glyphs (this may be an old version) -->
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
The glyph codes can be found here -->
https://fontawesome.com/cheatsheet
Example:
https://jsfiddle.net/h0g1fwpa/19/