Chart JS Line insert Picture - javascript

Simple Setup:
I have a RoR Application and a ChartJS Line Diagramm.
I want to add a Picture at a specific place but also text.
In the progress of the RoR Application answers of users will show up after time. Later the answer of two people will be shown, who is closer to the Average.
In my case I only need to know how a Picture could rendered inside.
Picture What it should look like
Here is my actual Code:
var points = [];
var data = {
datasets: [{
label: 'Antworten',
data: points,
radius: 6,
borderColor: "#000000",
borderWidth: 2,
backgroundColor: "#FF0000"
},
{
label: "",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [0],
borderDashOffset: 0.0,
showLine: true,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "rgba(1,0,0,1)",
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointStyle: "circle",
pointHitRadius: 10,
data: [{
x: 0,
y: 0
},{
x: 100,
y: 0
}],
borderColor: "#000000",
borderWidth: 5,
backgroundColor: "#FF0000"
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type: 'line',
data,
options: {
legend: {
display: false
},
showLines: false,
scales: {
xAxes: [{
type: 'linear',
gridLines: {
display: false
},
position: 'bottom',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 1,
min: 0,
stepSize: 1
}
}]
}
}
});
};

Found an Answer:
Here my solution
var user_a = new Image();
user_a.src = 'http://i.imgur.com/fwhrCBs.png';
var data = {
datasets: [
{
label: 'Spieler 1',
data: user_a_answer,
radius: 1,
borderColor: "#000000",
borderWidth: 2,
pointStyle: user_a,
}]

Related

ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?

I am trying to show a tooltip in Line Chart when a point was hovered. The tooltip will contain 3 data from 3 different data sets and 1 Label only.
Label: Date
Data Sets:
1. Cases
2. Deaths
3. Recoveries
This is the current output of the Line Chart that I made:
In the current output when I hover in one data set it only shows the data of the current data set only. In the image above I hovered the data set Cases.
Here's my current source code (CasesGraph.js):
import React, { useState, useEffect } from 'react';
import axios from "axios";
import Chart from "./Chart";
const CasesGraph = (country) => {
let currentCountry = country.country;
const [chart, setChart] = useState({});
useEffect(() => {
getData();
}, []);
const getData = async () => {
try {
const res = await axios.get(
"https://corona.lmao.ninja/v3/covid-19/historical/"+currentCountry+"?lastdays=all"
);
setChart({
labels: Object.keys(res.data.timeline.cases),
showTooltips: true,
datasets: [
{
label: "Covid-19 Cases", //CASES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#eb1515",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#eb1515",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#eb1515",
pointHoverBorderColor: "#eb1515",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.cases)
},
{
label: "Covid-19 Deaths", //DEATHS DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#1a1c1a",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#1a1c1a",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#1a1c1a",
pointHoverBorderColor: "#1a1c1a",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.deaths)
},
{
label: "Covid-19 Recoveries", //RECOVERIES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#0ec90e",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#0ec90e",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#0ec90e",
pointHoverBorderColor: "#0ec90e",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(res.data.timeline.recovered)
}
],
tooltips: {
mode: 'label',
callbacks: {
title: function(tooltipItem, data) {
return data.labels[tooltipItem[0].index]; //Date
},
beforeLabel: function(tooltipItem, data) {
return '\nCases: ' + data.datasets[0].data[0] +
'\nDeaths: ' + data.datasets[1].data[1] +
'\nRecoveries: ' + data.datasets[2].data[2];
},
label: function(tooltipItem, data) {
return 'Data2: ' + data.datasets[tooltipItem.datasetIndex].cases[tooltipItem.index];
},
},
},
},
);
} catch (error) {
console.log("CasesGraph: "+ error.response);
}
};
return (
<div style={{ position: "relative", margin: "auto", width: "80vw"}}>
<Chart data={chart} /> <!-- CHART COMPONENT -->
</div>
);
};
export default CasesGraph;
And here's my code for Chart.js component:
import React from "react";
import { Line } from "react-chartjs-2";
const Chart = ({ data }) => {
return <Line
data={data}
options={{
responsive: true,
showTooltips: true,
height: '600px',
width: "600px",
hover: {
mode: 'index',
intersect: false,
},
}}
/>;
};
export default Chart;
For more clear illustration of what I am trying to achieve here's the example: Chart.js - Line Chart Tooltip Hover Mode
Notice the tooltip has the two data from the two different datasets.
I have also been facing the same issue with react-chartjs-2 where I was unable to show multiple tooltips for Line Graph. After reading the document and trial and error, somehow I have cracked the solution.
There are three things. Need to configured with right namespace.
1.interaction:
interaction: {
mode: "index",
intersect: false,
}
2. tooltips:
tooltips:{
mode: "index",
intersect: false,
}
3.Hover:
hover: {
mode: "nearest",
intersect: true,
},
Three configuration with correct name will as below in options props.
options={{
interaction: {
mode: "index",
intersect: false,
},
plugins: {
legend: {
display: true,
position: "right",
align: "start",
labels: {
usePointStyle: true,
boxWidth: 6,
},
title: {
display: true,
text: "Chart.js Bar Chart",
},
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
},
responsive: true,
title: {
display: false,
},
scales: {
x: {
type: "time",
ticks: {
autoSkip: true,
maxTicksLimit: 14,
},
time: {
unit: "month",
displayFormats: {
quarter: "MMM YYYY",
},
},
},
y: {
ticks: {
callback: function (value, index, values) {
return `${value} kVA`;
},
},
},
},
}}
Try removing the tooltips in your code and set your code - as is shown in this working jsfiddle I made.
So, the config section should look like this:
// NOTE: "full_data" is the data source (i.e res.data, in your case).
var config = {
type: 'line',
data: {
labels: Object.keys(full_data.timeline.cases),
showTooltips: true,
datasets: [{
label: "Covid-19 Cases", //CASES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#eb1515",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#eb1515",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#eb1515",
pointHoverBorderColor: "#eb1515",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.cases)
}, {
label: "Covid-19 Deaths", //DEATHS DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#1a1c1a",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#1a1c1a",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#1a1c1a",
pointHoverBorderColor: "#1a1c1a",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.deaths)
}, {
label: "Covid-19 Recoveries", //RECOVERIES DATASET
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "#0ec90e",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "#0ec90e",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#0ec90e",
pointHoverBorderColor: "#0ec90e",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
maintainAspectRatio: false,
data: Object.values(full_data.timeline.recovered)
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
},
}]
}
}
};

How can I build a vertical line without going through my dots on my line graph? (charts.js)

Hey guys I have created a line chart that is almost done. The only thing that annoys me is the fact that there is some white space on the right-hand side of the graph. I would like to create a vertical line that does not go through the dots. It should be a smooth line without affecting the dots at the end of the line chart
enter image description here
[<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="mychart2" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("mychart2");
var ctx = canvas.getContext('2d');
const decimals = 0;var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales\['x-axis-0'\];
var yaxis = chart.scales\['y-axis-0'\];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#F6F6F6';
ctx.lineWidth = 1;
ctx.borderDashOffset = 0.0;
ctx.color = 'rgba(0, 0, 0, 1)';
ctx.zeroLineColor = "rgba(0, 0, 0, 0.25)";
ctx.tickMarkLength = 10;
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = { //configure the chart
type: 'line',
data: {
labels: \['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'\],
datasets: \[{
label: "25th Percentile",
showInLegend: false,
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
fill: 4,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3, //no fill here
data: \[28, 35, 40, 45, 50, 55, 62, 66, 70, 78\]
}, {
label: "90th Percentile",
backgroundColor: '#c4c1ff',
pointBackgroundColor: "#c4c1ff",
borderColor: '#c4c1ff',
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderWidth: 1,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: 3,
//no fill here
data: \[40, 65, 63, 64, 72, 79, 83, 87, 100, 108\]
}, {
label: "Median",
backgroundColor: '#0d0e25',
pointBackgroundColor: "#0d0e25",
borderColor: '#0d0e25',
borderWidth: 1,
pointRadius: 2,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
fill: false, //no fill here
data: \[30, 40, 45, 50, 56, 60, 66, 73, 78, 85\]
},
{
label: "25th - 75th Percentile",
showInLegend: false,
backgroundColor: '#645bff',
pointBackgroundColor: "#645bff",
borderColor: '#645bff',
pointRadius: 0,
lineTension: 0.5,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
borderCapStyle: 'butt',
borderDash: \[\],
borderDashOffset: 0.1,
borderJoinStyle: 'miter',
fill: 0,
//fill until previous dataset
data: \[35, 50, 51, 55, 63, 69, 73, 80, 85, 94\]
}, {
label: "10th Percentile",
backgroundColor: "#c4c1ff",
pointBackgroundColor: "#c4c1ff",
pointHoverBackgroundColor: "#c4c1ff",
pointHoverBorderColor: "#c4c1ff",
borderColor: "#c4c1ff",
pointStyle: "circle",
borderWidth: 1,
lineWidth: 1,
hoverRadius: 9,
pointRadius: 0,
pointBorderWidth: 3,
pointHoverRadius: 3,
pointHitRadius: 3,
lineTension: 0.3,
fill: '0', //fill until previous dataset
data: \[25, 30, 36, 39, 45, 49, 53, 56, 60, 68\]
}
\], lineAtIndex: 9
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets\[tooltipItem.datasetIndex\].label || '';
if (label) {
label += ': ';
}
if (label === "25th - 75th Percentile: ") {
label = "75th Percentile: "
}
label += tooltipItem.yLabel
return label;
}
}
},
title: {
display: true,
text: 'Frontend Engineer salaries (753 datapoints)',
fontSize: 20
},
maintainAspectRatio: false,
legend: {
onClick: (e) => e.stopPropagation(),
display: true,
labels: {
filter: function(item,
mychart2) {
return !item.text.includes("25th Percentile" & "10th Percentile")
}
}
},
spanGaps: false,
elements: {
line: {
tension: 0.1
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
yAxes: \[{
gridLines: {drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}\],
xAxes: \[{
gridLines: {drawOnChartArea:false
},
ticks: {
beginAtZero: true,
stepSize: 20,
},
scaleLabel: {
display: true,
labelString: 'Years of relevant experience',
fontSize: 20
}
}\]
}
}
};
var chart = new Chart(ctx, config)
</script>][1]
how should the vertical line look like?
do you mean the median line?
it would be helpful, if you can show us what kind of vertical line you mean, or at least tell us a function, so we know how the line should look like
EDIT:
You can add a 2nd yAxis to the right side.
Replace this for yAxes:
yAxes: [{
id: 'a',
type: 'linear',
position: 'left',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: true,
labelString: 'Salary',
fontSize: 20
},
ticks: {
beginAtZero: true,
stepSize: 20,
callback: function(value, index, values) {
return '$' + value.toFixed(decimals)
}
}
}, {
id: 'b',
type: 'linear',
position: 'right',
gridLines: {
drawOnChartArea:false
},
scaleLabel: {
display: false
},
ticks: {
display: false,
beginAtZero: true,
stepSize: 1
}
}]

ChartJs. How to stretch up line graph to the edges?

I use ChartJs library for building graphs. For now my graphs have "side gaps". I want stretch line graphics to the full width and height like this:
I tried to change canvas width and it works if canvas has not a full width, but I need to make it works also on full width:
My configurations:
data: {
datasets: [
{
data: bids,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
pointRadius: 0,
backgroundColor: 'rgba(58, 196, 174, 0.4)',
borderColor: '#3ac4ae',
lineTension: 0.7,
borderJoinStyle: 'miter',
},
{
data: asks,
pointRadius: 0,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
backgroundColor: 'rgba(255, 107, 66, 0.4)',
borderColor: '#ff6b42',
lineTension: 0.7,
cubicInterpolationMode: 'default',
borderJoinStyle: 'miter',
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [
{
display: true,
type: 'linear',
gridLines: {
borderDashOffset: 0,
display: true,
color: 'rgba(255, 255, 255, .1)'
},
ticks: {
autoSkip: false,
callback: (value, index, values) => {
console.log('valueskol', values)
return value
},
beginAtZero: true,
padding: 20,
},
}
],
yAxes: [
{
display: true,
type: 'linear',
position: 'left',
gridLines: {
display: true,
color: 'rgba(255, 255, 255, .1)',
drawBorder: false,
offsetGridLines: true,
tickMarkLength: 0,
drawOnChartArea: true
},
ticks: {
min: 0.02,
padding: 20,
stepSize: 0.1,
}
}
Would be very grateful, if someone can help me.
Set xAxes.ticks.min to the minimum X value and .max to the maximum value, and set yAxes.ticks.padding to 0.
Here's an example. I had to make up some numbers because the data is missing from your post:
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
data: [{
x: 1,
y: 12
}, {
x: 2,
y: 11
}, {
x: 3,
y: 10
}, {
x: 4,
y: 1
}, ],
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
pointRadius: 0,
backgroundColor: 'rgba(58, 196, 174, 0.4)',
borderColor: '#3ac4ae',
lineTension: 0.7,
borderJoinStyle: 'miter',
},
{
data: [{
x: 6,
y: 1
}, {
x: 7,
y: 3
}, {
x: 8,
y: 5
}, {
x: 9,
y: 11
}, ],
pointRadius: 0,
fill: true,
pointHitRadius: 10,
pointBorderWidth: 0,
pointHoverRadius: 4,
pointHoverBorderColor: 'white',
pointHoverBorderWidth: 2,
backgroundColor: 'rgba(255, 107, 66, 0.4)',
borderColor: '#ff6b42',
lineTension: 0.7,
cubicInterpolationMode: 'default',
borderJoinStyle: 'miter',
}
]
},
options: {
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: 'linear',
gridLines: {
borderDashOffset: 0,
display: true,
color: 'rgba(255, 255, 255, .1)'
},
ticks: {
autoSkip: false,
callback: (value, index, values) => {
console.log('valueskol', values)
return value
},
beginAtZero: true,
padding: 20,
min: 1,
},
}],
yAxes: [{
display: true,
type: 'linear',
position: 'left',
gridLines: {
display: true,
color: 'rgba(255, 255, 255, .1)',
drawBorder: false,
offsetGridLines: true,
tickMarkLength: 0,
drawOnChartArea: true
},
ticks: {
padding: 0,
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Chart JS custom tooltip not showing

I have a line graph and I want to alter it's tooltip. I want it, on hover, to show the follow (as an example):
Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7
The data in the tooltip is fine and works. See this fiddle here
What I'm trying to do is to add to the tooltip so that it can display the question in it too.
What I've tried:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
}
var q1 = "This is question 1";
var q2 = "This is question 2";
var q3 = "This is question 3";
var q4 = "This is question 4";
var q5 = "This is question 5";
var questions = [q1, q2, q3, q4, q5];
var questionsArrayLength = questions.length;
for (var i = 0; i < questionsArrayLength; i++) {
console.log(questions[i]);
}
var canvas = document.getElementById('chart');
canvas.height = 500;
var data = {
labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
datasets: [{
label: "Your answers",
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: "rgba(75,192,192,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [1,3,4,5,3],
stack: 4
},
{
label: "Average answers",
fill: false,
lineTension: 0.1,
borderColor: "rgba(79,104,241,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "rgba(79,104,241,1)",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(79,104,241,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
decimals: false,
pointHitRadius: 10,
data: [2, 7, 5, 10, 3],
stack: 5
},
{
label: "Your average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [0.5, 5],
borderDashOffset: 1,
lineTension: 0.1,
data: [5, 5, 5, 5, 5],
},
{
label: "Average",
pointStyle: 'line',
fill: false,
borderColor: "#ffffff",
borderCapStyle: 'round',
borderDash: [5, 8],
borderDashOffset: 0.6,
lineTension: 0.1,
data: [7, 7, 7, 7, 7],
},
]
};
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset=data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
}
}
},
plugins: {
filler: {
propagate: true
}
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index'
},
showLines: true,
scales: {
yAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Scores'
},
stacked: false,
ticks: {
beginAtZero: 0,
suggestedMin: 1,
suggestedMax: 10,
stepSize: 2,
userCallback: function(label, index, labels) {
// when the floored value is the same as the value we have a whole number
if (Math.floor(label) === label) {
return label;
}
},
}
}],
xAxes: [{
gridLines: {
color: 'rgb(255, 255, 255)',
z: 2
},
scaleLabel: {
display: true,
labelString: 'Questions'
},
}]
},
annotation: {
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
id: "n",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 0,
yMax: 3.7,
backgroundColor: "rgba(26,26,26,0.6)",
borderColor: "rgba(26,26,26,0.6)",
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 3.7,
yMax: 7,
backgroundColor: 'rgba(88,88,88,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 1,
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Q1",
xMax: "Q5",
yMin: 7,
yMax: 10,
backgroundColor: 'rgba(31,42,97,0.6)',
borderColor: 'rgba(88,88,88,0.6)',
borderWidth: 0
}
]
}
};
var myLineChart = Chart.Line(document.getElementById('chart'), {
data: data,
options: options
});
.wrap { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.5/chartjs-plugin-annotation.js"></script>
<div class="wrap">
<canvas id="chart"></canvas>
</div>
You have to define a callback function to change the tooltip title as follows.
tooltips: {
mode: 'index',
callbacks: {
title: tooltipItem => 'Question: ' + questions[tooltipItem[0].index]
}
}
Please check the amended JSFiddle

Add icon and custom tooltip - y-axis - chartjs

I am building a chart using chart.js. I want to add a fontawesome icon in the label of y-axis.
I tried to add - labelString: 'Range<i class="fa fa-question-circle" aria-hidden="true"></i>', but it doesn't seem to work. On hover of this icon, I want to also add a tooltip.
How can I add this icon?
Here is the code:
var canvas = document.getElementById('myChart');
var data = {
labels: ["Jan", "1", "2", "3", "4", "5", "Feb"],
datasets: [
{
label: "data",
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: 5,
pointHitRadius: 10,
data: [65, 59, 80, 0, 56, 55, 40],
}
]
};
function adddata(){
myLineChart.data.datasets[0].data[7] = 60;
myLineChart.data.labels[7] = "Newly Added";
myLineChart.update();
}
var option = {
showLines: true,
legend: {
display: false
},
title: {
display: false,
},
scales: {
yAxes: [ {
scaleLabel: {
display: true, labelString: 'Range'
},
gridLines: {
drawTicks: false, display: true
}
}],
xAxes: [ {
scaleLabel: {
display: true, labelString: 'Last 30 days'
},
ticks: {
min: 0, max: 15, stepSize: 5
}
}]
}
};
var myLineChart = Chart.Line(canvas,{
data:data,
options:option
});
Here is my chart: https://jsfiddle.net/9mg8c6zL/1/

Categories