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.
Related
Is it anyhow possible to set the label into the bar chart?
Like this example:
I couldnt find an example on the official page: Official example page
//EDIT
Later I had other problems, but I was able to solve them by switching to Nivo Charts. Nivo Charts
You could do this using label options in this way:
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
The result is:
This is a codesandbox example.
You can use the LabelList component with a custom render, here is the link of the documentation:
https://recharts.org/en-US/api/LabelList
also you can use the position property to center it inside the bar , here is an example of a customized LabelList :
https://recharts.org/en-US/examples/BarChartWithMinHeight
From everything I've seen we access the y axis on a 2-axis cartesian graph like so:
chart.options.scales.yAxes[0]
However I get 'undefined'. This despite the fact that my chart is generated with the following dictionary:
{
type: 'line',
data: {
...
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
tooltips: {
enabled: false,
}
}
}
This suggests the same method of access as I attempted. However chart.options.scales.yAxes returns object Object, so that is defined. Why can I not access it as an Array, which other examples I've seen, and the method of defining the chart, clearly show it to be?
Your options are defined in the Chart.js version 2 syntax.
scales.[x/y] axes arrays were removed in Chart.js version 3 (see specific changes). Scales are now configured directly to options.scales object with the object key being the scale id.
options: {
scales: {
y: {
beginAtZero: false
}
}
}
It seems that your chart.options.scales are overwritten with default values by Chart.js because they don't comply with the expected format. This would explain why chart.options.scales.yAxes returns an Object instead of an Array.
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 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,
...
}
}]