I have a highchart waterfall stacked and I want to hide the stacked label for a specific column (in this example column 3).
I believe the yAxis stackLabels formatter is the place where to do it but it doesn't work.
chart: {
type: 'waterfall'
},
stackLabels: {
enabled: true,
formatter: function () {
console.log(this.x);
return this.x == 3 ? '' : this.total;
}
},
In the situation where chart type is waterfall this.x is always 0 and this.points is null.
Can you please help with some sugestions?
https://jsfiddle.net/7Lo8htgx/5/
Related
I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.
Is it possible to remove the kendo pie chart label which are displaying "0%". But we can display the legends though there are no data for that.
Below is a link which displays "0%" for Rain.
http://dojo.telerik.com/ewALo
Please suggest me with your valuable ideas. Thanks.
You can use the labels.visual property. With a template of "#: value #%", only return a label in the visual property if the text is not "0%":
labels: {
visible: true,
position: "insideEnd",
template: "#: value #%",
visual: function(e) {
if (e.text != "0%") {
return e.createVisual();
}
}
}
Updated DEMO
UPDATE: This can also be easily accomplished with just a label template:
labels: {
visible: true,
position: "insideEnd",
template: "#if (value > 0) {# #: value #% #}#",
}
DEMO
You could remove the items with a zero value from the dataSource view data.
, dataBound: (function(e) {
var oa = e.sender.dataSource.view();
for (var i = oa.length-1; i >= 0; i--) {
if (oa[i].percentage == 0) { oa.splice(i,1); }
}
})
Of course this adjustment removes the rain item from the legend as well. I think that would be ok -- having an item in the legend that has no corresponding slice or category label could be confusing.
Here is an example of my code. I know the initial value, so I apply to focus on it. But if I hover over any of the items, then mouseout, the chart resets to no items being focussed. I thought I could apply the focus again with an onmouseout, but it doesn't work because of scope.
var selectedItem = "Banana";
var chart = c3.generate({
data: {
columns: [
['Apple', 33.3],
['Banana', 33.3],
['Canada', 33.3],
],
type : 'donut',
selection: {
enabled: true,
multiple: false
},
onclick: function (d, i) { selectItem(d, i); },
onmouseout: function (d, i) { resetItems(); }
},
donut: {
title: "Select an Item",
}
}).focus(selectedItem);
function selectItem(d, i) {
selectedItem = d.id;
}
function resetItems() {
chart.focus(selectedItem)
}
Anybody know what I'm missing here?
Thanks!
That's because of chained .focus() method - it returns undefined, so variable chart becomes undefined too.
Just call initial focus at separate statement after chart initialization.
chart.focus(selectedItem);
See jsfiddle.
I've been trying to get a telerik kendo ui column chart to display grouped data but where the groups might not have entries for all possible values and I don't want to show space/empty columns in these empty cases.
Telerik dojo of problem
Is anyone aware of anyway to get this to work more like the screenshot below
Excel has grouped the data but doesn't display a column at all if the data is null/zero
I couldn't find a built-in way to do this, so I ended up just placing the bars manually by overriding the visual function. In my case, I only needed to move one bar and that bar will always be the same category, which made it a whole lot easier in that I only had to identify it by matching the category. I could then move it with a transform. You cannot move it by setting the coordinates because the visual has already been created.
It would be more complex to do this dynamically, but it's certainly possible. This may give someone a start in the right direction.
One downside of this method is that you must also place the labels manually, which I have also done below. You can override the visual function of the labels, as well, but no references to any other elements are passed with the event data. Note how the documentation says the sender field may be undefined; in my experience, this is always the case.
It also does not move the tooltip or the highlight. You could use the same method to move the highlight (override the visual function, though on the series instead of the seriesDefaults) and draw the tooltip manually while moving the highlight -- similar to how the method below draws the label while moving the column.
Telerik Dojo Example
$(document).ready(function () {
$("#chart").kendoChart({
legend: { visible: false },
tooltip: { visible: false },
categoryAxis: {
name: "categoryAxis",
categories: ["1", "2", "3"],
},
series: [
{
data: [1, 2, 3],
highlight: { visible: false },
},
{
data: [1.5, null, 3.5],
highlight: { visible: false },
}
],
seriesDefaults: {
type: "column",
labels: { visible: false },
visual: function (e) {
if (e.value === null) return;
var visual = e.createVisual();
var axisRect = e.sender.getAxis("categoryAxis").slot("2");
var group = new kendo.drawing.Group();
var label = new kendo.drawing.Text(e.value, [0, 0], {
font: "20px sans-serif",
fill: { color: "black" }
});
var lbox = label.clippedBBox();
label.position([
e.rect.origin.x + e.rect.size.width / 2 - lbox.size.width / 2,
e.rect.origin.y - label.bbox().size.height * 1.5
]);
group.append(visual, label);
if (e.category === "2") {
var x = (axisRect.origin.x + axisRect.size.width / 2) - e.rect.size.width / 2;
group.transform(kendo.geometry.transform().translate(x - e.rect.origin.x, 0));
}
return group;
},
}
});
});
I tried to use this example in order to create a C3 chart. But its using all the data in the api. I am using angularjs.
my data looks like this
[
No:1
Name:'abc'
Id:3
Value:34
]
here is my code
d3.json("http://api.mydata", function(data) {
var convertedData = [];
data.forEach(function(item){
convertedData.push([item.Id, item.Value]);
});
var chart = c3.generate({
bindto : '#chartContainer',
data : {
columns : [convertedData]
},
keys: {
x: convertedData.ID,
value: convertedData.Value
}
});
});
thanks
The data field has to be populated with information about the axis as well. Here you have a functional example (sorry for the Spanish variables):
var chart = c3.generate({
bindto: "#chart-" + value.siglas,
data: {
x: 'x',
x_format: '%Y',
columns: [
['x', new Date('2011'), new Date('2012'), new Date('2013'), new Date('2014')],
['Primera matrícula', value.tasas_2011.tasas1, value.tasas_2012.tasas1, value.tasas_2013.tasas1, value.tasas_2014.tasas1],
['Segunda matrícula', value.tasas_2011.tasas2, value.tasas_2012.tasas2, value.tasas_2013.tasas2, value.tasas_2014.tasas2],
['Tercera matrícula', value.tasas_2011.tasas3, value.tasas_2012.tasas3, value.tasas_2013.tasas3, value.tasas_2014.tasas3],
['Cuarta matrícula', value.tasas_2011.tasas4, value.tasas_2012.tasas4, value.tasas_2013.tasas4, value.tasas_2014.tasas4],
['Media nacional' + averageErrorFlag, average['tasas_2011'].toFixed(2), average['tasas_2012'].toFixed(2), average['tasas_2013'].toFixed(2), average['tasas_2014'].toFixed(2)]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
In data, the format of the x axis and the values (in this graphic you have four variables and the x value) are included. You can also format the x axis with the axis key.