I have a chart - made with chartJS - that displays monthly data. There is a top label to indicate each new month at the top the chart. It is generated in xAxes with:
{
position: "top",
ticks: {
autoSkip: false,
maxRotation: 0,
callback: (_, i) => i
},
It works, but the top label is progressively shifting from its bottom label. it's weird. How to fix it?
screenshot
My code is:
{
legend: { display: false },
scales: {
yAxes: [
{
stacked: true,
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
zeroLineColor: "black,
zeroLineWidth: 0.5
}
}
],
xAxes: [
{
offset: true,
stacked: true,
ticks: {
fontColor: "black",
},
gridLines: {
color: "transparent",
zeroLineColor: "black,
z: 1
}
},
{
position: "top",
ticks: {
autoSkip: false,
maxRotation: 0,
callback: (_, i) => i
},
gridLines: {
drawBorder: false,
display: true,
lineWidth: 0.5
}
}
]
}
Related
I have the following bar chart. here is the javascript options for it:
public chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
labels: {
fontColor: "black",
fontSize: 12,
},
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
};
Here is the html:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[plugins]="[]"
[legend]="true"
[chartType]="'bar'"
height="300px"
>
</canvas>
Sometimes the data labels appear on the bars (see picture), but i can't figure out how to change the colour to make them white. Does anyone know?
UPDATE:
Here is the chart with new chartOptions, but still doesn't change the colour of the data labels:
chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
plugins: {
labels: {
fontColor: "white",
fontSize: 12,
},
},
};
I think the issue is because you add the baels plugin config inside the legend configuration.
It should be:
options: {
...
plugins: {
labels: {
fontColor: "black",
fontSize: 12,
},
}
...
}
The problem was due to the 'chartsjs-plugin-data-labels' plugin i had. Fixed it by adding this to the datasets array.
dataLabels: {
colors: ["white"],
},
I would like to remove the gridLines, but still have a border on my y-axis. Here's what it looks like.
I cannot seem to find a solution.
I tried using drawBorder: true but it's overwritten by drawOnChartArea: false.
My code currently looks like this:
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
// drawBorder: true,
// display: false,
},
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}
Set scales.yAxes[0].gridLines.drawTicks to false and and some padding in gridLines.ticks.padding:
{
type: 'horizontalBar',
data: {
labels: [4, 3, 2, 1],
datasets: [{
data: [50, 60, 70, 180]
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
padding: 10
}
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}
}
I am recieving in the context of my canvas (in ANGULAR 9) the information using:
var ctx = this.Chart.nativeElement.getContext('2d');
I would like to get to the legend colors which is generated automatically for chart.js
My canvas code is:
<canvas
baseChart
#linechart
id="linechart"
name="linechart"
[datasets]="grafica.series"
[labels]="grafica.labels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
[plugins]="lineChartPlugins"
chart-dataset-override="dataSetOverride"
>
</canvas>
And options keeped in lineChartOptions:
{
responsive: true,
maintainAspectRatio: true,
// We use these empty structures as placeholders for dynamic theming.
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 8,
autoSkip: true,
maxTicksLimit: 5, //5 //responsivemode
beginAtZero: true
},
gridLines: {
color: 'rgba(222,222,222,0,3)',
lineWidth: 1
},
scaleLabel: {
display: true,
labelString: ejeYLabel,
fontColor: 'rgba(255,255,255,1)',
fontSize: 9
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 9,
stepSize: 1,
beginAtZero: true,
},
gridLines: {
color: 'rgba(222,222,222,0.3)',
lineWidth: 1
}
}]
},
legend: {
display: false, //false, //responsivemode
labels: {
fontColor: 'white' //set your desired color
},
position: 'bottom',
align: 'start',
},
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
color: 'white',
formatter: function(value, context) {
return "";
}
}
}
}
Okey you can intercept the automated legend label creation call, and save the results somewhere before returning it, which gives you the colors.
change your labels block to this, and you can see in the console log how it looks:
legend: {
labels: {
fontColor: 'white', //set your desired color
generateLabels: (ctx) => {
var labels = Chart.defaults.global.legend.labels.generateLabels(ctx);
console.log('created labels', labels);
return labels;
}
}
},
I would change the height of the y axis or the height of the chart.
Here's my data and options:
this.data = {
labels: ['SAF/TGA'],
datasets: [
{
label: 'SAF/TGA',
backgroundColor: '#9CBB65',
borderColor: '#72242',
data: [28],
}
],
}
this.options = {
legend: {
display: false
},
responsive: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
display: true,
barThickness: 5,
gridLines: {
display: true,
offsetGridLines: false,
drawBorder: true
},
ticks: {
beginAtZero: true,
stepSize: 500
}
}],
xAxes: [{
gridLines: {
display: false,
offsetGridLines: false,
drawBorder: false
}
ticks: {
beginAtZero: true,
display: false,
suggestedMax: 100,
max: 100,
}
}]
},
}
then I call the component and define a height
<p-chart type="horizontalBar" [data]="data" [options]="options" width="10px" height="5px" >
</p-chart>
I have tried with multiple possibilities :
width="10px" height="5px"
or
[width]="10px" [height]="5px"
or
width="10" height="5"
...
no one works . I don't know how to decrease the height of my chart.
UPDATE : when I use the inspector and modify the class="chartjs-render-monitor"css, the height changes
I have problem with chartJS. I cannot add border around chart, yAxis unit title, and yAxis labelString with element. I'm using react with typescript. I can add only string to labelString. You can see what I want do do on screen and on another screen you can see what I actualy have.
Is there any options in chart.js#2.7.1 to add these elements?
First image is my goal. Second is actual.
#edit
This is my chartOptions file. I just pass arguments in function to get these options.
import * as Chart from 'chart.js';
const getOptions = (
beginAtZero: boolean,
tickMax: number,
tickStepValue: number,
titleText: string,
xAxesLabelString: string,
yAxesLabelString: string,
): Chart.ChartOptions => {
const ticks: Chart.LinearTickOptions = {
beginAtZero,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
max: tickMax,
stepSize: tickStepValue,
};
const options: Chart.ChartOptions = {
legend: {
display: false,
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
},
scaleLabel: {
display: true,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
labelString: xAxesLabelString,
},
ticks,
}],
yAxes: [{
display: true,
gridLines: {
drawBorder: true,
tickMarkLength: 15,
},
scaleLabel: {
display: true,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
labelString: yAxesLabelString,
},
ticks,
}],
},
title: {
display: true,
text: titleText,
},
tooltips: {
backgroundColor: '#E4677B',
callbacks: {
label: (tooltipItem, data) => {
return 'Time: ' + data.datasets[0].data[tooltipItem.index];
},
title: (tooltipItem, data) => {
return '';
},
},
custom: (tooltip) => {
if (!tooltip) {
return;
}
// disable displaying the color box;
tooltip.displayColors = false;
},
},
};
return {
...options,
};
};
export default getOptions;
public createChart({room, roomState, chartOptions, chartDataset, chartLabels}: ILineChartProps) {
const ctx = this.canvas.getContext('2d');
this.myChart = new Chart(ctx, {
data: {
datasets: chartDataset,
labels: chartLabels,
},
options: chartOptions,
type: 'line',
});
}
Adding one xAxes on top and one yAxes on right both showing nothing will do the job.
scales: {
xAxes: [{
/* Your xAxes options here */
}, {
position: 'top',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false
}
}],
yAxes: [{
/* Your yAxes options here */
}, {
position: 'right',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false
}
}]
}
This is what worked for me.
scales: {
xAxes: [
{
/* Your xAxes options here */
},
{
position: 'top',
ticks: {
display: false
},
gridLines: {
display: true,
drawOnChartArea: false,
drawTicks: false
}
}
],
yAxes: [
{
/* Your yAxes options here */
},
{
position: 'right',
ticks: {
display: false
},
gridLines: {
display: true,
drawOnChartArea: false,
drawTicks: false
}
}
]
}