So I have a chart.js chart with two series. One is a bar chart and the other is a line graph.
S1 = 71,166,2,6,8
S2 = 6,2,4,8,5
When I plot them, they both appear on their own scales which makes the bar and line graphs kinda pointless.
I need a way to plot both charts on the same scale.
Is there a way to do this within chart.js? If not, how would you do it?
thanks.
var barChartData = {
labels: dataLabels,
datasets: [{
type: 'bar',
label: "Actual",
data: dataActual,
fill: false,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-2'
}, {
label: "Maximum",
type:'line',
data: dataMaximum,
fill: false,
borderColor: '#EC932F',
backgroundColor: '#EC932F',
pointBorderColor: '#EC932F',
pointBackgroundColor: '#EC932F',
pointHoverBackgroundColor: '#EC932F',
pointHoverBorderColor: '#EC932F',
yAxisID: 'y-axis-1'
} ]
};
$(function () {
if (theChart !== undefined) {
theChart.destroy();
}
var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");
theChart = new Chart(ctxActualVsMax, {
type: 'bar',
data: barChartData,
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: false,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
});
In your code you have specified your two datasets to use different yAxisId's. Just set them both to the same, you can also remove the unused yAxes object from the options
fiddle
Related
I created a chart with two y-axis and one x-axis and struggle to create tooltips with intersect = false, so it will start the tooltip when hovering over the line and not only the point of the chart
However, the whole settings for the tooltip, described on
https://www.chartjs.org/docs/latest/configuration/tooltip.html
Does not seem to have any effect for me. My code see below
I am using this code inside a NodeRed template node
\<canvas id="myChart" width=912 height =370\>\</canvas\>
\<script\>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = '#E6E6E6';
var linecolors = \['#333F50','#B55A11', '#90C050'\]
var backgroundColor = \['#999FA7','#DAAC88', '#C7DFA7'\]
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{{payload.labels}}},
datasets: [
{
label: 'Folie Länge Ist',
backgroundColor: backgroundColor[0],
borderColor: linecolors[0],
data: {{{payload.eins}}},
yAxisID: 'left-y-axis',
},
{
label: 'Folie Länge Soll',
backgroundColor: backgroundColor[1],
borderColor: linecolors[1],
data: {{{payload.zwei}}},
yAxisID: 'left-y-axis',
},
{
label: 'Aufwickler Durchmesser',
backgroundColor: backgroundColor[2],
borderColor: linecolors[2],
data: {{{payload.drei}}},
yAxisID: 'right-y-axis',
}
]
},
// Configuration options
options: {
animation: false,
legend: {
display: true,
position: "top"
},
elements: {
point: {
pointStyle: 'circle',
radius: 0
},
line: {
tension: 0,
fill: false
}
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
yAxes: [
{
gridLines :{display:false},
id: 'left-y-axis',
type: 'linear',
position: 'left',
ticks: {
fontColor: linecolors[0],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
},
{
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:1},
id: 'right-y-axis',
type: 'linear',
position: 'right',
ticks: {
fontColor:linecolors[2],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
}
],
xAxes: [
{
ticks: {
autoSkip: true,
autoSkipPadding: 10,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
});
\</script\>
Tried setting intersect = false, also enable = false just to test if these settings have an effect
I'm trying to get chartjs to show a specific label next to each point, for example in this script it should display "TRALALA" in the label as well as mouse hover, but instead it shows the coordinates.
How to have the specific label instead ?
https://jsfiddle.net/z0eLygwx/
thanks
var valuedata = [{
x: 3,
y: 5
}];
var valuelabel = ['TRALALA'];
var chartData = {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
};
var myBarChart = new Chart(document.getElementById("myChart1"), {
type: 'scatter',
data: {
labels: valuelabel,
datasets: [{
label: 'Distance',
borderColor: '#2196f3', // Add custom color border
backgroundColor: '#2196f3', // Add custom color background (Points and Fill)
data: valuedata,
pointRadius: 10,
pointHoverRadius: 12
}]
},
options: {
legend: {
display: true
},
title: {
display: true,
text: 'Distance of JDPT kanji compared to the equivalent JLPT level'
},
scales: {
yAxes: [{
type: 'logarithmic',
display: true,
scaleLabel: {
display: true,
labelString: 'Count',
fontSize: 16
}
}],
xAxes: [{
type: 'linear',
position: 'bottom',
display: true,
scaleLabel: {
display: true,
labelString: 'Distance',
fontSize: 16
},
gridLines: {
display: true
}
}]
},
plugins: {
datalabels: {
color: '#d6621e',
align: 'right',
offset: 16,
font: {
weight: 'bold'
}
}
}
}
});
myBarChart.update();
Ok I got it with
formatter: function(value, context) {
context.chart.data.labels[context.dataIndex];
}
For example
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'line',
data: {
labels: ['a', 'b'],
datasets: [{
data: [10, 20]
}]
},
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
});
I need to always show tooltips
I tried
How to show tooltips always on Chart.js 2
I want to show the value of label inside the pie graph. (vue-chartjs / pieceLabel)
etc.
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {
linechartData: {
type: Array | Object,
required: true
},
linechartLabels: {
type: Array,
required: true
}
},
data () {
return {
options: {
title: {
display: true,
text: 'MONTHLY FEEDBACKS RECEIVED (LAST 12 MONTHS)'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [{
gridLines: {
display: true
},
display: false
}]
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart({
labels: this.linechartLabels,
datasets: [{
borderColor: '#027be3',
pointBackgroundColor: 'rgb(38, 166, 154, 0.5)',
borderWidth: 1,
pointBorderColor: '#249EBF',
backgroundColor: 'rgb(38, 166, 154, 0.5)',
data: this.linechartData
}]
}, this.options)
}
}
I expect tooltip to always show by default
I am trying to create a chart with chart.js and i am using this plugin for showing some labels. But when most value on top, it not showing. Check first value (5), it not showing. Is any way to show it?
I tried padding for <canvas> but not work.
var ver = document.getElementById("chart").getContext('2d');
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,3,1,2]
}]
},
options: {
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="chart"></canvas>
Also fiddle here: https://jsfiddle.net/9o84ucny/
https://www.chartjs.org/docs/latest/configuration/layout.html
Use the layout property to options object:
layout: {
padding: {
top: 20
}
}
chart var should be like that:
var chart = new Chart(ver, {
type: 'bar',
data: {
labels: ['Val1', 'Val2', 'Val3', 'Val4'],
datasets: [{
label: "Value",
borderColor: "#fff",
backgroundColor: "rgba(248,66,113,.85)",
hoverBackgroundColor: "#f84271",
data: [5,10,1,2]
}]
},
options: {
layout: {
padding: {
top: 20
}
},
legend: {
display: false,
},
tooltips: {
backgroundColor: 'rgba(47, 49, 66, 0.8)',
titleFontSize: 13,
titleFontColor: '#fff',
caretSize: 0,
cornerRadius: 4,
xPadding: 10,
displayColors: false,
yPadding: 10
},
animation: {
"duration": "1000"
},
scales: {
xAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}],
yAxes: [{
stacked: false,
gridLines: {
drawBorder: true,
display: true
},
ticks: {
display: true
}
}]
},
plugins: {
labels: {
render: 'value',
}
},
}
});
It also show clear when you use title display true put this inside option
options: {
plugins: {
labels: {
render: 'value',
}
},
title: {
display: true,
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value) { if (value % 1 === 0) { return value; } }
}
}]
}
}
Does Chart.js (documentation) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve this with css?
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [data]
}
]
}
Realy thanks for help.
In Chart.js version 2.0, it is possible to set labels for axes:
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
See Labelling documentation for more details.
For Chart.js version 3
options = {
scales: {
y: {
title: {
display: true,
text: 'Your Title'
}
}
}
}
If you have already set labels for your axis like how #andyhasit and #Marcus mentioned, and would like to change it at a later time, then you can try this:
chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";
Full config for reference:
var chartConfig = {
type: 'line',
data: {
datasets: [ {
label: 'DefaultLabel',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [],
} ]
},
options: {
responsive: true,
scales: {
xAxes: [ {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
} ]
}
}
};
For Readers in 2021:
Version
"chart.js": "^3.3.2",
Real World Working Sample:
const optionsTemplate = (yAxisTitle, xAxisTitle) => {
return {
scales: {
yAxes: {
title: {
display: true,
text: yAxisTitle,
font: {
size: 15
}
},
ticks: {
precision: 0
}
},
xAxes: {
title: {
display: true,
text: xAxisTitle,
font: {
size: 15
}
}
}
},
plugins: {
legend: {
display: false,
}
}
}
}
In chart JS 3.5.x, it seems to me the title of axes shall be set as follows (example for x axis, title = 'seconds'):
options: {
scales: {x: { title: { display: true, text: 'seconds' }}}
}
see: https://www.chartjs.org/docs/latest/axes/labelling.html
just use this:
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1","2","3","4","5","6","7","8","9","10","11",],
datasets: [{
label: 'YOUR LABEL',
backgroundColor: [
"#566573",
"#99a3a4",
"#dc7633",
"#f5b041",
"#f7dc6f",
"#82e0aa",
"#73c6b6",
"#5dade2",
"#a569bd",
"#ec7063",
"#a5754a"
],
data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],
},]
},
//HERE COMES THE AXIS Y LABEL
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
});
</script>
If you are using chart JS v4 try this.
options = {
scales: {
y: {
title: {
display: true,
text: 'Test'
}
},
x: {
title: {
display: true,
text: 'Test'
}
}
},
plugins: {
legend: {
display: false,
},
}
}
<Scatter
data={data}
// style={{ width: "50%", height: "50%" }}
options={{
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: "Probability",
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Hours",
},
},
],
},
}}
/>
See example with name of x axis and y axis left and right.
public barChartOptions: ChartOptions = {
title: {
display: true,
text: 'Custom Chart Title',
},
responsive: true,
legend: {
position: 'right',
},
scales: {
yAxes: [
{
position: 'right',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - right',
},
},
{
position: 'left',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - left',
},
},
],
xAxes: [
{
display: true,
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Titulo do eixo X',
fontStyle: 'italic',
fontSize: 12,
fontColor: '#030',
},
},
],
},
};