I want to change only the values shown on the x-axis, but not the values of the dataset,which can be seen by hovering on the curve. I've tried:
callback: function(value) {return Math.round(value);}
in the xAxes ticks, but it also changes the dataset.
Is there any way to only change the display?
Here is my curve:
curve
You should change the options for to xAxes of your chart.
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
ticks: {
callback: function(value, index, values) {
return Math.round(value).toString();
}
}
}]
},
tooltips: {
callbacks: {
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index];
}
}
}
}});
I think that this won't change the dataset.
Related
Hi I'm new at charts and this is my chartjs chart, it's working currently, but it's showing in sharp lines and I want to make it smooth curve lines on this chart. Any ideas?
function statistics(data) {
if ($('#stats-currency').length > 0) {
if (typeof(stats_currency) !== 'undefined') {
stats_currency.destroy();
}
if (typeof(data) == 'undefined') {
var currency = $('select[name="currency"]').val();
$.get(admin_url + 'home/stats_currency/' + currency, function(response) {
stats_currency = new Chart($('#stats-currency'), {
type: 'line',
data: response,
options: {
responsive:true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
},
});
}, 'json');
} else {
stats_currency = new Chart($('#stats-currency'), {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
},
});
}
This can be done through the option lineTension that needs to be defined on your dataset. Choose a value below 1.
datasets: [{
...
lineTension: 0.8
}]
By default, you should however already see curved smooth lines since accoring to Chart.js documentation, the default value is 0.4.
lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.
Please note that if the steppedLine value is set to anything other than false, lineTension will be ignored.
you can do it by adding tension value to your charts options
<canvas id="myChart"></canvas>
JS
const config = {
type: 'line', // your chart type
data: data, // pass here your data
options: {
elements: {
line: {
tension : 0.4 // smooth lines
},
},
},
};
// pass it like
const myChart = new Chart(
document.getElementById('myChart'),
config
);
I have to chart.js charts that are stacked, and should be on the same x axis. How can I get the top one to be a bar chart, but the bottom one to be a line chart? I'm not sure of another way to declare 'type' other than at the top, where it affects all of the charts.
Here is an example stackbitz to the charts I'm building
https://stackblitz.com/edit/angular-chartjs-multiple-charts?file=src%2Fapp%2Fapp.component.ts
Thanks so much!
You have two individual charts, hence you should define a distinct Chart.ChartConfiguration for each. Provided that Chart.ChartOptions are the same for both charts, this could look as follows:
const chartOptions: Chart.ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: { display: false },
scales: {
xAxes: [{ display: false }],
yAxes: [{ display: false }],
}
}
const chartConfigs: Chart.ChartConfiguration[] = [{
type: 'bar',
options: chartOptions
},{
type: 'line',
options: chartOptions
}];
And inside ngAfterViewInit, you use chartConfigs[index] to pick the appropriate chart configuration.
ngAfterViewInit() {
this.charts = this.chartElementRefs.map((chartElementRef, index) => {
const config = Object.assign({}, chartConfigs[index], { data: this.chartData[index] });
return new Chart(chartElementRef.nativeElement, config);
});
}
Please have a look at your amended StackBlitz
I found a code to add a label to each value in the Y axis and I have tried it. This is the code
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
}
}
}]
}
}
});
But, can I give it only for minimum and maximum values? If so, how?
The following is an example chart that I mean. The minimum and maximum labels I give a red mark.
Example chart that I mean
You can specify min and max directly, Please check https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#step-size
e.g
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
},
min: 1,
max: 100
}
}]
}
}});
You can also use axis range settings, It is only change the data values that are used to scale the axis and useful for extending the range of the axis while maintaining the auto fit behaviour.
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings
e.g.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
},
suggestedMin: 1,
suggestedMax: 100
}
}]
}
}});
I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things.
How to add a label on the Y axis.
How to shorten the label on the X axis so it displays only
the first 10 letters.
How to reverse the order in which the values are shown in
the tooltip.
Are these thigs are possible to implement?
I have marked what I want to change here.
Here are what my chart options look like now:
var ctx = $("#newchart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
barValueSpacing: 20,
tooltips: {
enable: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data){
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
}
}
},
responsive: true,
segmentShowStroke: true,
scales: {
xAxes: [{
display: false,
stacked: true,
ticks:{
stepSize : 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}]
}
}
});
1. Adding a Y-axis label
in the yAxes object give it a scaleLabel object that takes in labelString (example fiddle)
yAxes: [{
scaleLabel: {
labelString: 'Value'
}
}]
2. Shortening xAxis category labels
For this, you can pass a userCallback function to the xAxis ticks object that can return your desired output. The function will take in the original label in its first parameter so you can just return a substring at your desired length, example fiddle
xAxes: [{
ticks: {
userCallback: function(label, index, labels) {
if(typeof label === "string")
{
return label.substring(0,1)
}
return label;
},
}
}],
3. reverse tooltip order
The tooltips object accepts a function called itemSort that can be passed to Array.prototype.sort.
So you could so something like below, but you may also need to compare the objects index as well as the datasetIndex to get your desired result. (example fiddle)
tooltips: {
mode: 'label',
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex
},
},
I am using latest chart js and i want to change Y axis value to real number
0,1,2,3,....
i want to change y axis in to positive real numbers where do i put scales value to change above format to real number format
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: allDate,
datasets:jsonArray,
},
options: {
scales: {
xAxes: [{
display:true
}],
yAxes: [{
display:true,
type: "linear",
ticks: {
userCallback: function(value, index, values) {
return value;
}
}
}]
}
}
});