No outer label is working,
axis: {
x: {
label: 'Month',
position: 'outer-center', // ignoring!
type: 'timeseries',
tick: {
format: '%b/%y',
rotate: 32
}
},
y: {
label: '% of Duplicated Records',
position: 'outer-top', // ignoring!
// tick: { format: d=> (parseInt(d*10)/10)+"%" }
}
} // \axis
The position: 'outer-*' are ignored.
See https://output.jsbin.com/seriyih/edit
https://c3js.org/samples/axes_label_position.html
position is defined as a sub-property of label so you just need to rearrange a bit (also need the sub-property text for the label if you do it this way):
y: {
label: {
text: '% of Duplicated Records',
position: 'outer-top', // should now work
}
// tick: { format: d=> (parseInt(d*10)/10)+"%" }
}
Related
is there a way to reduce the width of x-axis (see picture) in c3? Even if I tried to set "stroke-width" attribute to the "<"path">" tag with different values - it didn't make any visual changes. Thank you for your advices in advance.
Picture
var chart = c3.generate({
bindto: '#' + chartId,
data: {
columns: columns,
type: 'bar',
labels: true
},
interaction: {
enabled: false
},
tooltip: {
show: false
},
color: {
pattern: colorPattern
},
bar: {
width: { ratio: 0.7 },
space: 0.25
},
size: settings.ChartSizes.BarChart,
legend: {
position: 'right',
grouped: true,
item: {
onclick: function (d) {
counter++;
if (counter === 1) {
chart.hide();
chart.show(d);
} else {
chart.show();
counter = 0;
}
}
}
},
axis: {
x: {
type: 'category',
categories: categories,
show: showAxe
},
y: {
show: false
}
}
});
This is a common issue, caused by you not picking up the c3.css file - see https://github.com/c3js/c3/issues/1962
If you can fix that, the problem goes away
I have the following chart and I want to make the y axis spacing integers only (when the data to display is low, I get decimals: 0.1, 0.2...). Anyone can help?
var Presence = c3.generate({
bindto: '#presence',
data: {
url: 'ranking.csv',
x:'AC_YEAR',
types: {
Number_students: "bar",
Ranking: 'spline'
},
axes:{
Number_students: "y",
Ranking: "y2"
}
},
axis: {
y: {
label: {
text:"Students",
position: "outer-middle"
},
tick: {
outer: false}
},
y2: {
inverted:true,
show: true,
label: {
text:"Ranking position",
position: "outer-middle"
},
tick: {
outer: false
}
},
x: {
label: {
text:"Year",
position: "outer-center"
},
tick: {outer: false}
}
},
size: {
height: 400,
width: 800
},
});
The csv file looks like this:
AC_YEAR,Number_students,Ranking
2011,1,103
2012,2,30
2014,1,178
2015,1,188
But the csv is changing over time and sometimes the Number of students is 100. So that is why I do not want to fix values on the y axis, only avoid having floats when the Number of students is low (1 or 2)
Thanks in advance!
Set the y tick formatting function to return blanks on non-whole numbers
y: {
label: {
text:"Students",
position: "outer-middle"
},
tick: {
format: function (d) {
return Math.abs(Math.round(d) - d) < 0.001 ? d : "";
},
outer: false
}
},
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
I've been trying to make the x-axis grid lines to be behind the content of a c3js bar chart.
I toyed with z-index which didn't work. I tried with opacity which didn't work either.
Here is the JSFiddle with the code I was using.
https://jsfiddle.net/chaitanya81/rvhb0fy4/1/
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', 'M','T','W','TH','F','SA','SU'],
['revenue', 200, 300, 200, 400, 500, 700, 600.56]
],
type: 'bar'
},
color: {
pattern: ["#ff9900"]
},
axis: {
x: {
type: 'category', // this needed to load string x value
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
grid: {
x: {
lines: [
{value: "M"},
{value: "T"},
{value: "W"},
{value: "TH"},
{value: "F"},
{value: "SA"},
{value: "SU"}
]
}
},
bar: {
width: {
ratio: 0.4
}
},
legend: {
hide: true
},
tooltip: {
contents: function (data, defaultTitleFormat, defaultValueFormat, color) {
var $$ = this, config = $$.config,
titleFormat = config.tooltip_format_title || defaultTitleFormat,
nameFormat = config.tooltip_format_name || function (name) { return name; },
valueFormat = config.tooltip_format_value || defaultValueFormat,
text, i, title, value;
for (i = 0; i < data.length; i++) {
if (! (data[i] && (data[i].value || data[i].value === 0))) { continue; }
if (! text) {
title = titleFormat ? titleFormat(data[i].x) : data[i].x;
text = "<div id='tooltip' class='d3-tip'>";
}
value = valueFormat(data[i].value, data[i].ratio, data[i].id, data[i].index);
text += "<span class='value'>$" + value + "</span>";
text += "</div>";
}
return text;
}
},
transition: {
duration: 1000
}
});
Any one tried this with c3js charts?
Thanks in Advance.
You can set grid.lines.front to false
var chart = c3.generate({
bindto: '#chart',
data: {
...
},
grid: {
lines: {
front: false
}
}
});
https://jsfiddle.net/Yosephsol/bwu70xgq/
The grid line layer comes over the chart elements (bars) layer, and SVG the z-index is set by the order of the elements in the document.
You could use your regions to give the same effect. One way is
CSS
.border {
stroke: #000;
fill: transparent;
}
.whiteborder {
stroke: white;
fill: transparent;
}
Script
regions: [
{ axis: 'x', start: -0.5, end: 0, class: 'border' },
{ axis: 'x', start: -0.5, end: 1, class: 'border' },
{ axis: 'x', start: -0.5, end: 2, class: 'border' },
{ axis: 'x', start: -0.5, end: 3, class: 'border' },
{ axis: 'x', start: -0.5, end: 4, class: 'border' },
{ axis: 'x', start: -0.5, end: 5, class: 'border' },
{ axis: 'x', start: -0.5, end: 6, class: 'border' },
{ axis: 'x', start: -0.5, end: 6.5, class: 'whiteborder' },
],
The last line is to get rid of the top border (you can't style different borders of a rect differently - there's an alternative [hack] using stroke-dasharray, but it depends on the relative height and width of your regions)
Fiddle - https://jsfiddle.net/d611yq7x/
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.