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,
...
}
}]
Related
I've tried everything I can. If anyone can help me out, it'll be great. I want the numbers on the graphs and the legend gone
Legend and data-labels can be disabled by
const options = {
dataLabels: {
enabled: false
},
legend: {
show: false
}
}
EDIT
If you want to remove all the additional graphics, try using sparkline which will only keep the chart and hide everything.
sparkline: {
enabled: true
}
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.
Hi I have created a sample chart using public data, but it has more data to display in the chart, so I'm trying to add scroll-bar along x-axis so that all the data are displayed neatly. But I'm finding it difficult to add the scroll-bar to x-axis, so how to add scroll-bar to the chart. I have attached a plnkr for viewing. Please help me.Thank you :)
Controller:
var myApp = angular.module('app',["chart.js"]);
myApp.controller("chartController",function($scope,$http){
$scope.totalDocks = [];
$scope.availDocks =[];
$http.get("http://citibikenyc.com/stations/json")
.then(function(item){
var dataFetched = item;
console.log(dataFetched.data.stationBeanList[0]);
for(var i=0; i < 100 ; i++){
$scope.totalDocks.push(dataFetched.data.stationBeanList[i].totalDocks);
$scope.availDocks.push(dataFetched.data.stationBeanList[i].availableDocks);
}
})
})
Plunker File
Since angular.chart is responsive by itself, you do not have to add scroll bar manually, instead inorder to make chart to appear claerly you can make ticks along x axis to be skipped.
Add this to your options config,
$scope.options = {
scales: {
xAxes: [{
ticks: {
autoSkipPadding: 100
}
}]
},
responsive: true,
maintainAspectRatio: true
};
DEMO
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/
I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.