I use the chart.js plugin to make JavaScript charts. The link of the plugin: https://www.chartjs.org/ I would like the zeros of the Y-axes to be aligned without the scales being the same. Put the two zeros at the same level without the curves having the same scales.
Here is a picture of the chart.
Here is the code for the graph below:
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: charts.bar.months.short,
datasets: [
{},
{},
{
label: '{{ trans._("TREASURY")|ucfirst }}',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: charts.colors['secondary'],
data: treasury.n,
type: 'line',
yAxisID: 'treasury',
lineTension: 0,
pointHitRadius:10
},
]
},
options: {
tooltips: charts.bar.tooltips,
maintainAspectRatio: false,
legend: {
display:false
},
scales: {
xAxes: [{
barPercentage: 0.8,
ticks: {
fontSize:charts.fontSize
}
}],
yAxes: [{
id:"turnover",
position: 'left',
ticks: {
fontSize:charts.fontSize,
beginAtZero: true,
callback: formatAxisAmountTruncate,
fontColor: charts.colors.success,
fontStyle: 'bold',
}
}, {
id:"charges",
position: 'left',
ticks: {
fontSize:charts.fontSize,
beginAtZero: true,
callback: formatAxisAmountTruncate,
fontColor: charts.colors.warning,
fontStyle: 'bold',
}
}, {
id:"treasury",
position: 'right',
ticks: {
fontSize:charts.fontSize,
beginAtZero: true,
callback: formatAxisAmountTruncate,
fontColor: charts.colors.secondary,
fontStyle: 'bold',
},
gridLines: {
display:false
}
}]
}
}
});
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 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 am using a chart and I am using type: 'logarithmic', passing the max value like this:
max: scalesMax.toFixed(2),
But that gives me 8e+2
How can I fix it?
I'm using chart.js
This how I get my values for each charts, I have one chart next to the other to compare each values form 2 datasets
var scalesMaxTotalCasesTrend = Math.max(...customConfirmed);
var scalesMaxTotalPositiveTrend = Math.max(...totPositivi);
var scalesMaxIsolationTrend = Math.max(...totIsolamento);
var scalesMaxHospitalizationTrend = Math.max(...totRicoverati);
var scalesMaxHospitalizationWithSymptomsTrend = Math.max(...totRicoveratiConSintomi);
var scalesMaxIntensiveCareTrend = Math.max(...totTerapiaIntensiva);
function setConfigurationGraph(dataGraphType, labels, data, scalesMax) {
configAllDateGraph.push({
dataGraphType: dataGraphType,
type: 'line',
data: {
labels: labels,
datasets: [{
fill: true,
backgroundColor: "rgba(250, 250, 250, 1)",
data: data,
borderColor: "#fafafa",
borderDash: [5, 5],
backgroundColor: "#fafafa",
pointBackgroundColor: "#fafafa",
pointBorderColor: "#fafafa",
pointHoverBackgroundColor: "#fafafa",
pointHoverBorderColor: "#fafafa"
}]
},
options: {
responsive: true,
title: {
display: true
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#fafafa"
},
ticks: {
fontColor: "#fafafa"
}
}],
yAxes: [{
display: true,
type: 'logarithmic',
gridLines: {
color: "#fafafa"
},
ticks: {
fontColor: "#fafafa",
beginAtZero: true,
max: scalesMax.toFixed(2),
min: 0
}
}]
},
legend: {
display: false
}
}
});
}
This automatically happens in JS i believe.
You can use toFixed() max limit of 20;
Have you tried this
max: scalesMax.toFixed(20)
i am drawing a line chart using chart.js and showed a tooltip on graph.But i am not able to draw a border around tooltip and in title i want to show text and current y-axis value as title(eg.total count:2 but instead of 2 it showing undefined.Now i removed code from title callback). I am trying for many days but still no luck. Please help me. Here is my code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:["a","b","c"],
datasets: [{
label: 'Total count',
lineTension: 0,
data: [2,4,6],
fill: false,
borderColor: 'rgba(39,50,139,1)',
pointBackgroundColor:'rgba(176,179,214,1)',
pointBorderColor:'rgba(39,50,139,1)',
pointRadius:5,
pointHoverBackgroundColor:'rgba(39,50,139,1)',
borderWidth:2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false
},
chartArea: {
backgroundColor: '#fff'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
maxTicksLimit:3
}
}],
xAxes: [{
gridLines: {
display: false,
color: "black"
},
ticks: {
max:12,
maxTicksLimit:12
}
}]
},
tooltips: {
callbacks: {
title:function(tooltipItem, data) {
},
afterLabel: function(tooltipItem, data) {
return userNamesResult[tooltipItem.index];
}
},
titleSpacing:0,
titleMarginBottom:0,
titleFontColor:'#000',
backgroundColor: '#f2f3f4',
bodyFontColor: '#000',
//bodyFontStyle:'bold',
bodyFontSize: 14,
displayColors: false,
borderColor:'#ff0000',
borderWidth:5,
}
}
});
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
}
}
]
}