I have a requirement where I want my pie chart to display only top 3 data label instead of displaying all and filling the space. Is there any inbuilt highchart api available or a best solution to achieve this?
Here is my jsfiddle:
http://jsfiddle.net/k80ayx1t/
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
}
I have searched enough and tried to find the solution before posting this question but didn't find any help.
You can use dataLabels.formatter function for returning only specific dataLabels (for points thats value is big enough).
formatter: function() {
var val = this.y,
allData = $.extend(true, [], this.series.processedYData).sort(),
length = allData.length;
if (length - 4 >= 0 && val > allData[length - 4])
return val;
}
I am sorting my yValues and then I am checking if my dataLabels points y value is bigger or equal to the third y value of my series. If it is bigger or equal, I am returning value, else I am not returning anything.
Here you can find an example how it can work: http://jsfiddle.net/k80ayx1t/1/
Related
I'm using react-chart-js-2 and I want to add units to the y-axis. There doesn't seem to be much documentation about the full range of options and the tutorials I found don't seem to be working. I want to add a £ sign to every value on the y axis of my line chart? I should just be able to use a callback function and add £ to the value string?
const options = {
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Years'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
callback: value => `£${formatNumberDecimal(value)}`
}
}],
}
}
This doesn't work, and when I dynamically change the input data, it crashes. How do I change the units?
I hope it's not too late!
I don't know much about chart.js api, but i think you can't use ES6 arrow functions inside that callback, try with something like:
callback: function (value) {
return `£${value}k`;
},
Here is a working codesandbox example.
I was wondering if its possible to decide pixels between two bars? I got 2 series that represents some numbers, and they are standing side by side, 2 and 2 bars next to each other. I just want to control the space between the bars that stands next to each other. For example 10 px.
I've tried different settings from highcharts but havent found anything that seems to work.
You can set pointPadding: 0 and in load event position the columns in the way you want:
chart: {
type: 'bar',
events: {
load: function() {
var series = this.series;
series[0].points.forEach(function(p, i) {
p.graphic.attr({
translateX: 5
});
series[1].points[i].graphic.attr({
translateX: -5
});
});
}
}
},
plotOptions: {
series: {
pointPadding: 0
}
}
Live demo: http://jsfiddle.net/BlackLabel/13re4Lok/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
There are 2 parameters whick can help you pointWidth and pointPadding
pointWidth Documentation
pointPadding Documentation
plotOptions: {
series: {
pointPadding: 0.3,
pointWidth: 10 // Will ignore pointPadding if used
}
},
Fiddle
I need to make a chart with data from 1 full year, but it has too many x labels.
I did this to remove some:
var labels= []
for(var i = 0; i< 360;i++) {
labels.push(i%30 == 0 ? "":i);
}
This worked fine for a while, but now I need the tooltip to show the exact day so I need the label for that.
I'm using angularJs and ChartJs.
If you didn't specify autoSkip: false for ticks of x-axes, you should have x-axes labels auto skipped. It is by default true. So you shouldn't have overwhelming labels, plus tooltips should still show those auto skipped data.
xAxes: [{
ticks: {
autoSkip: false,
fontSize: 11,
...
}
}]
I'm trying to create a graph that can look good on both mobile and desktop using c3 (http://c3js.org/).
However, I'm having trouble getting the x-axis, which is a timeseries, to display change size for mobile. The only way I've managed to do this is by destroying the graph and re-creating it from scratch. But this prevents me from adding a nice transition to the chart, which would be really nice to have.
[![desktop view][1]][1]
I tried using the tick culling option on the x axis and set a max value of 8, but this option gets ignored when using either flush() or resize() methods.
So my question is: is there any way to change the x axis values without having to destroy the graph and re-generate it?
http://imgur.com/EMECqqB
I have used the onresized: function () {...}
or you can use the onresize: function () { ... }
link
to change the culling max on resized screen:
axis: {
x: {
type: 'timeseries',
tick: {
culling: true,
format: '%m-%d',
fit:true,
culling: {
max: window.innerWidth > 500 ? 8 : 5
}
}
}
},
onresized: function () {
window.innerWidth > 500 ? chart.internal.config.axis_x_tick_culling_max = 8 : chart.internal.config.axis_x_tick_culling_max = 5;
},
Here a example: https://jsfiddle.net/07s4zx6c/2/
add mediaquery according to device size
like this.
#media screen and (max-width:810px) {
.c3 svg { font: .8em sans-serif; }
}
Absolutely pulling my hair out on this one. There seems to be no black and white solution offered on GitHub - which is strange, since it seems like a fairly simple concept. Perhaps I just don't get it.
Basically, I am trying to create a fluid and responsive portfolio - using Isotope to filter the items. The filtering works fine, the 4 columns are totally fluid and everything looks great when you resize the window.
HOWEVER, for mobile and tablet layouts, I simply need to adapt from a 4-column layout to a 2-column layout.
I tried this:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
Didn't work :(
Any help would be much appreciated.
This should work to set your number of columns. Then you just divide with columns.
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}
I think there's a slightly nicer way where you can still use css media queries. See my answer here: https://stackoverflow.com/a/20270911/1010892
Hope that helps!!