I was able to create a great radar chart with Chart js. My only problem is that the datasets attribute hoverBackgroundColor is not making any affect.
Here's my code:
chosen = [[5.2,0,1,9,11],[5.1,2,4,9,7],[5.1,2,2,9,8]]
playerNames= ['Henderson','Baldock','Stevens']
function createRadarComparison(chosen, playerNames) {
var ctx = document.getElementById('myChart').getContext('2d');
var borderColors = ['#ff82827d', '#82ff917d', '#fdff827d','#b882ff7d']
var colors = ['#ff828252', '#82ff8c52', '#fdff8252', '#b882ff52' ];
datasetdata = []
for (var i = 0; i < chosen.length; i++) {
datasetdata[i] = {
label: playerNames[i],
data: chosen[i],
backgroundColor: colors[i],
hoverBackgroundColor: colors[i],
borderColor: borderColors[i],
pointBorderColor: "#fff",
pointBackgroundColor: borderColors[i],
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
}
}
var config = {
type: 'radar',
data: {
labels: ['Price', 'Goals', 'Assits', 'Clean Sheets', 'Bonus'],
datasets: datasetdata
},
options: {
legend: {
position: 'top',
labels: {
"fontSize": 10,
}
},
scale: {
ticks: {
beginAtZero: true,
display: false
}
},
maintainAspectRatio: false,
}
};
var myChart = new Chart(ctx, config);
}
Here's the image of the chart
I am expecting the color of the whole dataset area to change on hover, but nothing changes. Appreciate your help
Related
I have written below code to generate a radar chart, I am trying to hide label point in y-axis.
Version : 2.9.4
var radarData = {
labels : [1,2,3,4,5,6,7,8,9,10,11,12,13],
datasets : [
{
backgroundColor: "#fff",
borderColor: "rgb(255,70,0)",
pointBackgroundColor: "rgb(255,70,0)",
pointBorderColor: "rgb(255,70,0)",
pointHoverBackgroundColor: "rgb(255,70,0)",
pointHoverBorderColor: "rgb(255, 99, 132)",
data : [2,12]
}
]
};
var ctx = document.getElementById("radar1").getContext("2d");
var myNewChart = new Chart(ctx, {
type: "radar",
fill: true,
data: radarData,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
}
});
Output I got like below
I want to remove marked label from below image
How can I remove it ?
It's call ticks, to hide
scale: {
ticks: {
display: false
}
},
I have a chart with multiple datasets. I want the label of a dataset from the legend to not be visible if all the values in a dataset are null. I've found some solutions but they were only working if data was declared in the initial configuration. In my case it is dynamically updated.
Here is the code:
self.initGraph = function () {
ctxWell = document.getElementById("wellChart").getContext('2d');
if (wellChart != undefined)
wellChart.destroy();
wellChart = new Chart(ctxWell, {
type: 'line',
data: {
labels: [],
datasets: [
{
backgroundColor: reportColor.Green,
borderColor: reportColor.Green,
label: 'Motor Frequency Hz',
yAxisID: 'y-axis-2',
data: [],
borderWidth: 1,
pointRadius: 0,
fill: false
},
{
backgroundColor: reportColor.Turquoise,
borderColor: reportColor.Turquoise,
label: 'Pump Discharge Pressure ' + helpers.getListSelectedValue(self.dischargePressureID(), self.pressureList()),
yAxisID: 'y-axis-1',
data: [],
borderWidth: 1,
pointRadius: 0,
fill: false
}
,
]
},
options: {
maintainAspectRatio: false,
animation: {
duration: 0
},
scales: {
yAxes: [
{
id: 'y-axis-1',
// stacked: true,
scaleLabel: {
display: true,
fontSize: 18,
labelString: helpers.getListSelectedValue(self.intakePressureID(), self.pressureList())
},
ticks: {
beginAtZero: true
}
},
{
id: 'y-axis-2',
position: 'right',
display: self.checkAxis(),
scaleLabel: {
display: self.checkAxis(),
fontSize: 18,
labelString: "Hz, " + helpers.getListSelectedValue(self.motorTemperatureID(), self.temperatureList())
},
ticks: {
beginAtZero: true
}
}
]
},
elements: {
line: {
tension: 0.000001
}
},
legend: {
display: true,
onClick: wellChartLegendClick,
}
},
}
});
wellChart.update();
};
self.updateWellDaily = function () {
var chart = wellChart;
chart.data.labels = [];
for (var j = 0; j < chart.data.datasets.length; j++) {
chart.data.datasets[j].data = [];
}
for (var i = 0; i < self.wellResults().length; i++) {
chart.data.labels.push(self.wellResults()[i].reportedTime);
chart.data.datasets[0].data.push(self.wellResults()[i].motorFrequency);
chart.data.datasets[1].data.push(self.wellResults()[i].pumpDischargePressure);
}
chart.update();
};
self.initGraph();
self.updateWellDaily();
The legend filter function can be used for this, if you tell it to hide labels where in the dataset all data is zeros it will update dynamicly, see example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 0],
borderWidth: 1,
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
},
{
label: '# of Counts',
data: [1, 2, 3,4,5,2],
borderWidth: 1,
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}
]
},
options: {
plugins: {
legend: {
labels: {
filter: (legendItem, chartData) => (!chartData.datasets[legendItem.datasetIndex].data.every(item => item === 0))
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);
document.getElementById("tt").addEventListener("click", () => {
chart.data.datasets[1].data = [0, 0, 0, 0, 0, 0];
chart.update()
});
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<button id="tt">
change data
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>
I draw a chart using chart js on canvas. Then I draw a image on top of the column of chart. When I load the page It shows properly. But when I hover mouse on chart column, image gone hide.
I have tried with chart js. I have tried with morris js.
let myChart = document.getElementById('myChart').getContext('2d');
// Global Options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#777';
let massPopChart = new Chart(myChart, {
type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {
labels: ['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
datasets: [{
label: 'Population',
data: [
6,2,7,3,4,6
],
backgroundColor: '#1d569e',
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options: {
title: {
display: true,
text: 'Largest Cities In Massachusetts',
fontSize: 25
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: '#000'
}
},
layout: {
padding: {
left: 50,right: 0,bottom: 0,top: 0
}
},
tooltips: {
enabled: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var canvas = document.getElementById('myChart');
var context = canvas.getContext('2d');
var imgPath = 'https://i.imgur.com/t0MRiAf.png';
var imgObj = new Image();
imgObj.src = imgPath;
imgObj.onload = function() {
context.drawImage(imgObj, 0, 0, 100, 100);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class="container">
<canvas id="myChart"></canvas>
</div>
I want to show the image on top of column. It will be responsive.
i add animation to show label value data on value points in line chart js. but when i click the legend to hide a line, the label not disappear. to be honest, i really don't have any clue to fix it.
the chart now
the chart after hide some line with legend
var ctxTotal = $("#grap_trajec_divisi");
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function (tooltipItems, data) {
var dataM = tooltipItems.yLabel;
formatM(dataM);
var multistringText = [data_M];
multistringText.push(tooltipItems.yLabel);
multistringText.push(data.datasets[tooltipItems.datasetIndex].label);
return multistringText;
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
labelString: 'Value'
},
ticks: {
callback: function (value, index, values) {
var dataYaxis = value;
formatM(dataYaxis);
return data_M;
}
},
}]
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '.7rem "Calibri",sans-serif';
ctx.fillStyle = '#555';
ctx.textAlign = "center";
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
});
}
}
//title: {
// display: true,
// text: 'Chart.js Line Chart - proyeksi'
//}
};
var chartData = {
labels: arr,
datasets: [{
label: "RKAP",
data: value_LT,
fill: false,
borderColor: "rgb(89,159,240)",
pointBorderColor: "rgb(89,159,240)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Target",
data: value_LT2,
fill: false,
borderColor: "rgb(186,179,61)",
pointBorderColor: "rgb(186,179,61)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Actual",
data: value_LO,
fill: false,
borderColor: "rgb(78,199,138)",
pointBorderColor: "rgb(78,199,138)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}, {
label: "Proyeksi",
data: value_LP,
fill: false,
borderColor: "rgb(241,151,89)",
pointBorderColor: "rgb(241,151,89)",
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 1,
pointHoverBorderWidth: 1,
pointRadius: 3,
spanGaps: true,
}],
};
var config = {
type: 'line',
options: chartOptions,
data: chartData
};
if (window.chartTrajecDivisi != undefined) {
window.chartTrajecDivisi.destroy();
}
window.chartTrajecDivisi = new Chart(ctxTotal, config);
i want to hide the label when line hide by clicking the label, so the label and the line is hide / show together.
I think this works.
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
if (!meta.hidden) {
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
formatM(data);
ctx.fillText(data_M, bar._model.x, bar._model.y - 5);
});
}
});
i found the answer for this. just remove the animation, and used plugin datalabel chart js.
Why are the default Chart.js legend boxes transparent rectangles like these:
How do I make them solid squares like these instead? I've looked through http://www.chartjs.org/docs/latest/configuration/legend.html but can't find anything relevant.
https://jsfiddle.net/askhflajsf/7yped1d5/ (uses the latest master branch build)
var barChartData = {
labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
datasets: [{
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
},
{
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
};
Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;
var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
responsive: true,
legend: {
display: true,
position: "right"
},
title: {
display: false
},
scales: {
xAxes: [{
type: "time",
ticks: {
minRotation: 90
}
}]
}
}
});
<script src="http://www.chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>
This is because you haven't set the backgroundColor property for your datasets (which is responsible for the legend's fill color).
datasets: [{
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
}, {
backgroundColor: "#ff3300",
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var barChartData = {
labels: ["2013-03-09", "2013-03-16", "2013-03-23", "2013-03-30", "2013-04-06"],
datasets: [{
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
data: [10943, 29649, 6444, 2330, 36694],
fill: false,
borderWidth: 2
}, {
backgroundColor: "#ff3300",
borderColor: "#ff3300",
data: [9283, 1251, 6416, 2374, 9182],
fill: false,
borderWidth: 2
}]
};
Chart.defaults.global.defaultFontFamily = "'Comic Sans MS'";
// Disable pointers
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.point.hoverRadius = 0;
var ctx = document.getElementById("bar-chart").getContext("2d");
new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
responsive: true,
legend: {
display: true,
position: "right"
},
title: {
display: false
},
scales: {
xAxes: [{
type: "time",
ticks: {
minRotation: 90
}
}]
}
}
});
<script src="http://www.chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="bar-chart"></canvas>