I have problem getting dataset 2 (Score) to use the y1 scale, it seems to use scale for first dataset. Where is the error? I thought that using two y-scales should solve the problem with two very different datasets, but i only get the values from the "Completed" dataset, so I assume the data for "score" is there, but way way above the scale. . .
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [
{
type: 'line',
label: "Completed",
yAxesID: 'y',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxesID: 'y1',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins:{
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
You have a typo, yAxesID should be yAxisID if you change that it will work fine as you can see in the example below:
const CHART = document.getElementById("statChart");
let statChart = new Chart(CHART, {
type: 'line',
data: {
labels: ["1", "2", "3", "4", "5", "6", "7"],
datasets: [{
type: 'line',
label: "Completed",
yAxisID: 'y',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
type: 'line',
label: "Score",
yAxisID: 'y1',
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75, 192, 192, 0.4)",
borderColor: "rgba(75, 192, 192, 1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHitRadius: 10,
data: [8500, 8900, 8000, 8100, 5600, 5500, 4900]
}
]
},
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
title: {
display: true,
text: 'Your Result'
},
tooltips: {
mode: 'nearest',
intersect: true,
},
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
min: 0,
max: 100
},
y1: {
type: 'linear',
display: true,
position: 'right',
min: 0,
max: 10000,
// grid line settings
grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up
}
}
}
}
});
<body>
<canvas id="statChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.js" integrity="sha512-n8DscwKN6+Yjr7rI6mL+m9nS4uCEgIrKRFcP0EOkIvzOLUyQgOjWK15hRfoCJQZe0s6XrARyXjpvGFo1w9N3xg==" crossorigin="anonymous"></script>
</body>
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 using Chart.js version 2.8.0. I have encountered a problem. The problem is that I have to change the color of the every legend label. How do I change the color of the every label in this version (2.8.0)
Note: (I have no way yo use latest version for this satiation)
data: {
labels: [
"Sep",
"oct",
"Nov",
"Dec",
2020,
"Feb",
"Mar",
"Apr",
"May",
"jun",
"Jul",
],
datasets: [
{
label: "Fees",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "red",
pointBackgroundColor: "red",
borderColor: "red",
pointHighlightStroke: "red",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, -230, -100, -200, 190, 220, -350, 180, -200, 500],
},
{
label: "Interest",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "green",
pointBackgroundColor: "green",
borderColor: "green",
pointHighlightStroke: "green",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Positive",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(68,208,99,0.53)",
pointBackgroundColor: "rgba(68,208,99,0.53)",
borderColor: "rgba(68,208,99,0.53)",
pointHighlightStroke: "rgba(68,208,99,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Negative",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(243,86,86,0.53)",
pointBackgroundColor: "rgba(243,86,86,0.53)",
borderColor: "rgba(243,86,86,0.53)",
pointHighlightStroke: "rgba(243,86,86,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
{
label: "Net Value",
fill: true,
// backgroundColor: "#FCBB0A",
backgroundColor: "rgba(86,170,243,0.53)",
pointBackgroundColor: "rgba(86,170,243,0.53)",
borderColor: "rgba(86,170,243,0.53)",
pointHighlightStroke: "rgba(86,170,243,0.53)",
borderCapStyle: "butt",
stacked: true,
beginAtZero: true,
data: [-200, 200, 230, -100, -200, 190, 220, 350, 180, -200, 0],
},
],
},
options: {
borderWidth: 0,
pointRadius: 0,
showPoints: false,
showLine: false,
stacked: true,
tooltips: {enabled: false},
responsive: true,
maintainAspectRatio: false,
line: {
borderWidth: 0,
showLine: false,
},
elements: {
point: {
radius: 0,
},
},
legend: {
position: "bottom",
align: "center",
labels: {
generateLabels: function(chart) {
let labels Chart.defaults.global.legend.labels.generateLabels(chart);
labels[0].fillStyle = 'blue';
labels[0].fontColor = '#666'
labels[0].strokeStyle = 'green'
labels[0].fontSize = 14
return labels;
}
}
},
animation: {
duration: 750,
},
},
But labels[0].fontColor = '#666' and labels[0].fontSize = 14 not working
How can solve this problem please help me anyone
Instead of trying to do it in the generateLabels part you need to set it as a property in the labels config like so:
options: {
legend: {
labels: {
fontColor: 'red'
}
}
}
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
legend: {
labels: {
fontColor: 'red'
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>
I am new to chart.js I want to draw a circle inside bar charts or at baseline like the picture circle in blue color below how can I achieve this
help me thanks in advance
In your existing bar chart configuration, you can define a second dataset of type: 'scatter' as follows:
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
Please take a look at the runnable code below and see how it works.
new Chart("chart", {
type: "bar",
data: {
labels: ["A", "B", "C", "D", "E", "F", "G"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40],
barPercentage: 0.5,
backgroundColor: "rgba(201, 203, 207, 0.2)",
borderColor: "rgb(201, 203, 207)",
borderWidth: 1
},
{
type: 'scatter',
data: [0, 0, 0, 0, 0, 0, 0],
backgroundColor: "rgb(0, 0, 255)",
borderColor: "rgb(255, 255, 255)",
pointRadius: 7,
pointHoverRadius: 7,
borderWidth: 2
}
]
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
canvas {
max-width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
I have a multi line linear chart made with Chart.js like this:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
My problem is that when I go over a point all points on that column activate.
I want to activate just the single point on the selected line.
So, just to be clear, this is what I have now: Actual Behaviour
And this is what i want: Expected Behaviour
Anyone could help me on this?
You need to set the hover interaction mode option like so:
options: {
hover: {
mode: 'nearest'
}
}
Working example:
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
hover: {
mode: 'nearest'
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="400"></canvas>
In normal laptop view i am getting the chart well labeled and all the graph points are coming but when i open the app in moible view in browser it it does not fit well with the screen(as shown in image 2).. Can anyone please suggest some way to tackle it and show all the points in mobile screen like the desktop(full screen) one.
In normal desktop view
in mobile view:
this is my code:
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: this.labels,
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.priceArr,
spanGaps: true,
}
]
}, options:{
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Price Rise/Fall'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}]
}
}
});