hi i have a question on adding title to axes for line chart. i am current using react-chartjs-2 and chart.js v4.2 . i have a line chart with 3 different datasets and i want two y axes. this is my current config for line component
const optionsMulti = {
responsive: true,
interaction: {
mode: "index" as const,
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: "Test Chart",
},
},
scales: {
y: {
type: "linear" as const,
display: true,
position: "left" as const,
title: { display: true, title: "title1" },
},
y1: {
type: "linear" as const,
display: true,
position: "right" as const,
grid: {
drawOnChartArea: false,
},
title: { display: true, text: "title2" },
},
},
};
const data = {
labels: "label",
datasets: [
{
label: "one",
data: data1,
borderColor: "rgb(255, 99, 132)",
backgroundColor: "rgba(255, 99, 132, 0.5)",
yAxisID: "y",
},
{
label: "two",
data: data2,
borderColor: "rgb(53, 162, 235)",
backgroundColor: "rgba(53, 162, 235, 0.5)",
yAxisID: "y",
},
{
label: "three",
data: data3,
borderColor: "rgba(75, 192, 192)",
backgroundColor: "rgba(75, 192, 192, 0.5)",
yAxisID: "y1",
},
],
}
<Line options={optionsMulti} data={data} />
title for yAxisID: "y1", is showing but yAxisID: "y" title is not showing.
screenshot of current chart
how can i set the config for both y axes to show titles?
Related
I want to create stacked bar chart with groups in use chart.js v3. I
my chart output
I did it and i am getting the following image. But here, instead of the sum of label 1 and label2 appearing as 7000, how can I show the intersection of label 1 and label 2 together as 4000 by starting from the x-axis.
type: 'bar',
data: {
labels: labelsVals,
datasets: [
{
label: 'Label 1',
data: seriesValsPaid,
backgroundColor: 'rgba(21, 169, 225, 0.6)',
borderColor: 'rgba(21, 169, 225, 1)',
borderWidth: 1,
stack: 'first',
},
{
label: 'Label 2',
data: seriesValsWaiting,
backgroundColor: 'rgba(21, 122, 225, 0.6)',
borderColor: 'rgba(21, 122, 225, 1)',
borderWidth: 1,
stack: 'first',
},
{
label: 'Label 3',
data: seriesValsOutgoing,
backgroundColor: 'rgba(255, 0, 0, 0.6)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1,
stack: 'second',
}
]
},
});
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
'bar-x-axis1': {
stacked: true,
display:false
},
'bar-x-axis2': {
stacked: true,
display:false
},
y: {
stacked: false,
beginAtZero: true
// display:false
}
}
}
This is how I solved the problem.
I am trying to create a stacked horizontal bar chart with an average line on each bar using the ChartJS library. I tried several times and searched on the Internet but I did not find out any satisfying answers. I appreciate your helping. Thanks.
Example:
.
In this example, the red line on each bar implies the average value of its group.
To create the stacked horizontal bar chart, please see
https://jsfiddle.net/lamtn862004/9wm1krqf/10/.
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableHBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true,
type: 'category',
id: 'y-axis-0'
}],
xAxes: [{
stacked: true,
type: 'linear',
ticks: {
beginAtZero:true
},
gridLines: {
display: false,
drawTicks: true,
},
id: 'x-axis-0'
},
{
stacked: true,
position: 'top',
type: 'linear',
ticks: {
beginAtZero:true
},
id: 'x-axis-1',
gridLines: {
display: true,
drawTicks: true,
},
display: false
}]
}
}
});
Now, I want to add the average line to each bar (as shown in the image).
Also, do you know the other solutions with open-source libraries for doing this?
The lines can be drawn using floating bars tied to the separate axis y2. To do so, you need to add another dataset as follows (I don't exactly understand what values you want to display, hence I randomly chose 40, 65 and 55):
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
Further you must define a new scales option as shown below:
y2: {
display: false
}
Please take a look at your amended runnable code and see how it works.
var data = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25]
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65]
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10]
},
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
]
};
new Chart('myChart', {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
y2: {
display: false
},
x: {
stacked: true,
beginAtZero: true,
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
I have the below ChartJS code and I would like to hide the grid vertical lines only and not the horizontal ones and keep only one vertical line per two like in the capture below:
image]1
Thanks.
<canvas id="line-chart" width="800" height="450"></canvas>
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168,170,178,190,203,276,408,547,675,734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40,20,10,16,24,38,74,167,508,784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6,3,2,2,7,26,82,172,312,433],
label: "North America",
borderColor: "#c45850",
fill: false
}
]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
Just add grid color as function in options for x axis scale and conditionally change the colors like its done below:
var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
type: 'line',
data: {
labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
datasets: [{
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}, {
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
label: "Asia",
borderColor: "#8e5ea2",
fill: false
}, {
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
label: "Europe",
borderColor: "#3cba9f",
fill: false
}, {
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
label: "Latin America",
borderColor: "#e8c3b9",
fill: false
}, {
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
label: "North America",
borderColor: "#c45850",
fill: false
}]
},
options: {
title: {
display: true,
text: 'World population per region (in millions)'
},
scales: {
x: {
grid: {
display: true, //Make it false to remove all the vertical lines.
color: function(context) {
if (context.tick.value %2 == 0) {
return 'gray';
} else {
return 'white';
}
},
}
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.1/dist/chart.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
I don’t really use chart.js so there may be a better way to do this. I think there may be a built in way to use a callback for this but I couldn’t figure it out. Here’s what does work.
Add this function at the top to create an array of alternating colors.
let colors = [];
function gridColors() {
for (let i=0; i<10; i++) {
colors.push("rgba(0,0,0,0)")
colors.push("rgba(0,0,0,0.1)")
}
}
gridColors()
And in your options add the following
options: {
title: {
display: true,
text: 'World population per region (in millions)'
},
scales: {
x: {
grid: {
beginAtZero: true,
color: colors,
}
}
}
}
});
I have date chart with a line and a bar datasets.
The problem that I have is that the bar widths is overlapping other columns as the bar dataset will be normally zero.
You can see that the two bars are overlapping with June 4 column.
If I add a bar value in two consecutives days, it will adjust correctly the bar width.
Now the bar widths adjusts for each day column.
If there are more days the bars widths get worst:
You can see that in this chart, it seems that the bars widths overlaps with 4 days in the x axys.
You can check an example code here: https://codepen.io/anon/pen/eKdjay?editors=1010
Uncomment the js code at line 38 to see how the bars width adjusts.
This is the code I use to initialize the chart.
new Chart($('#chart'), {
type: 'bar',
data: {
labels: [],
datasets: [
{
label: "Reach",
data: reachData,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
borderWidth: 3,
fill: false,
lineTension: 0,
yAxisID: 'y-axis-right',
type: 'line'
}, {
label: "Interactions",
data: interactionsData,
borderColor: 'rgb(139, 195, 74)',
backgroundColor: 'rgb(139, 195, 74)',
borderWidth: 3,
fill: false,
xAxisId: 'x-axis',
lineTension: 0
}
]
},
options: {
bezierCurve : false,
tooltips: {
position: 'nearest',
mode: 'index',
intersect: false,
},
scales: {
xAxes: [{
type: 'time',
time: {
format: 'MM/DD/YYYY',
unit: 'day',
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-left',
ticks: {
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: "Reach",
fontColor: 'rgb(54, 162, 235)'
}
}, {
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-right',
ticks: {
beginAtZero: true,
},
gridLines: {
drawOnChartArea: false,
},
scaleLabel: {
display: true,
labelString: "Interactions",
fontColor: 'rgb(255, 99, 132)'
}
}]
}
}
});
I am trying to build a graph similar to the one in the image
but I can't find the right way to do it, I want to join the line with the bar on the same axis, and for every bar I want to define the starting Y position and the ending Y position, I tried to do it using multi axis but it didn't work, what I tried is something similar to this
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', July'],
datasets: [{
label: 'Sales',
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-2'
},{
type: 'bar',
label: 'Visitor',
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}]
};
const options = {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
display: true,
gridLines: {
display: false
},
labels: {
show: true
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
id: 'y-axis-1',
gridLines: {
display: false
},
labels: {
show: true
}
},
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-2',
gridLines: {
display: false
},
labels: {
show: true
}
}
]
}
};
but this way, there will be two axes, one on the left and the other on the right side, but both start from the same position