How to show only first and last label of x-axis in chart-js - chart.js

scales: {
yAxes: [{
ticks: {
beginAtZero: false,
autoskip: true,
min: this.minTick,
max: this.maxTick,
},
gridLines: {
display: true
}
}],
xAxes: [{
type: 'time',
display: true,
ticks: {
beginAtZero: false,
},**strong text**
how to display only first and last label in x-axis using chartjs ? is there any built-in option available to get this implemented?

Related

ChartJS: how to have combo bar line chart with the same number of ticks on both

I've already read this (which has no answer), and my problem is not exactly the same.
So I have a bar char displaying the revenue in m€, with the ticks on the left, and a line displaying the profit, in % on the right. The problem is that the profit can be negative. Thanks to the option ticks: {beginAtZero: true}, they both begin at 0, and I'm using the callback afterDataLimits for both yAxes: I'm changing manually the minimum for both so they stay aligned. This is working, but the ticks are not aligned.
I'd like to have the same number of ticks on both sides so they would be aligned. How to do this?
I'm creating a mixed chart like this (data aren't important):
new Chart($(this).get(0).getContext('2d'), {
type: 'bar', // overall chart type
data: {
labels: years,
datasets: [{
type:'line',
label: 'Profit %',
fill:false,
data: profit,
yAxisID: 'left-axis'
}, {
label: 'Revenue',
fill: true,
data: revenue,
yAxisID: 'right-axis'
}]
},
options: {
legend: { position:'bottom', usePointStyle:true },
maintainAspectRatio: true,
responsive: true,
title: { display: false },
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
yAxes: [{
type:'linear',
id:'right-axis',
display: true,
position: 'left',
stacked:false,
scaleLabel: {display: true, labelString: 'm€'},
gridLines: {drawOnChartArea:false},
ticks: {beginAtZero: true}
}, {
type:'linear',
id:'left-axis',
display: true,
position: 'right',
scaleLabel: {display: true, labelString: '%'},
ticks: {beginAtZero: true}
}]
}
}
}

Chart.js - Sync y-axis and reversed y-axis origins

I have a bar chart where I want 2 opposed y-axis with the same origin. Here is my code :
let _barData={
...
};
let _barOptions={
legend:{
position:'right'
},
annotation: {annotations: _annotations},
scales: {
xAxes: [{gridLines: {display: false}, barThickness : 5, stacked: true, type: 'time',time: {unit: 'month'}}],
yAxes: [
{id:'A', stacked: true, gridLines: {display: false}, ticks: {beginAtZero:true,display: true}},
{id:'B', stacked: true, gridLines: {display: false}, ticks: {beginAtZero:true,display: true,reverse:true}}
]
}
};
new Chart("barChart", {
type: 'bar',
data: _barData,
options: _barOptions
});
This code displays the following:
I just want the origins to be alined, how can I do that?
Thanks in advance.

Combined bar and line chart using chart.js

I have to plot a combined bar chart and line chart where bar chart is plotted with left y axis(PDF) and x axis and line chart with right Y axis(CDF) and x axis.
The output is just showing the line chart but the bar chart is not showing.When i tried to show both the charts separately ,both are coming fine but i want to show them in one .
Below is my code.
Component.ts
public xaxislabel:any[] = [0,5,10,15,20,25,30,35,40]
public ChartOptions:any = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'KPI Range'
},
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'PDF'
},
gridLines: {
display: false
},
id: 'A',
type: 'linear',
position: 'left',
ticks: {
max: 1,
min: 0
}
}, {
scaleLabel: {
display: true,
labelString: 'CDF'
},
gridLines: {
display: false
},
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
},
scaleShowVerticalLines: true,
responsive: true
};
public ChartData:any[] =[{
label: "",
type: "bar",
data: [0,0.05,0.1,0.05,0.3,0.3,0.1,0.05,0.05]
},
{
label: "",
type: "line",
fill: false,
data: [0,0.05,0.15,0.2,0.5,0.8,0.9,0.95,1.0]
}
]
component.html
<div id="demo">
<canvas id ="rnachart" baseChart
[datasets]="ChartData"
[labels]="xaxislabel"
[options]="ChartOptions"
</div>
Please help me on this

Chart.js: how to increase space between multiple Y axes on the same side?

I have a line chart with multiple Y axes on the right side, but they're too close. The options I've applied are:
{
scales: {
yAxes: [
{
id: "GC",
position: "right",
scaleLabel: {
display: true,
labelString: "Garbage Collection",
fontSize: 15
},
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
},
{
id: "CPU",
position: "right",
scaleLabel: {
display: true,
labelString: "CPU Usage",
fontSize: 15
},
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 100
}
}
]
}
}
The result:
How can I increase the space between multiple Y axes?

Clear margin and padding from chart.js graphs

I'm working with the Chart.js v2 library and want to achieve following result:
Chart.js has a build in padding and margin renderd in their canvas.
Is there any method of setting this to 0 to achieve the result above.
Currently I can make it look like:
As you can see the graph is not completely fitted to the canvas,
instead the left and right side have a small empty extension of the graph.
Below is the config I used for the following result:
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
gridLines: {
display: true,
color: '#eff3f6',
zeroLineColor: '#fff',
zeroLineWidth: 0,
drawBorder: false,
tickMarkLength: 0
},
ticks: {
display: false,
beginAtZero: true
}
],
yAxes: [{
gridLines: {
display: true,
color: '#eff3f6',
zeroLineColor: '#fff',
zeroLineWidth: 0,
drawBorder: false,
tickMarkLength: 0
},
ticks: {
display: false,
beginAtZero: true
}
}]
}
}

Resources