We Keep Coding

Modify chart js tooltip body

I plotted chart based on mock data and need to display info in the tooltip.
Data:
const chartData = {
labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
datasets: [{
data: [15, 16, 13, 14, 15, 18, 19, 20, 21, 22, 21, 22, 23, 19, 18, 16, 16, 15, 14, 13, 12,12, 12, 12],
fill: true,
borderColor: 'rgb(92, 165, 241)',
backgroundColor: 'rgba(92, 165, 241, 0.1)',
tension: 0.1
}]
};
Tooltip settings:
plugins: {
tooltip: {
displayColors: false,
callbacks: {
labelColor: function(context) {
return {
backgroundColor: 'rgba(92, 165, 241, 0.1)',
};
},
title: function(context) {
},
beforeBody: function(context) {
return `time: ${context[0].label}\ntemp: ${context[0].raw}°\nhmd: 45%`
},
footer: function(context){
return `cloudy`
}
},
backgroundColor: '#74b5f3'
}
}
The problem is that I can't change the body of the tooltip. In the documentation --> callbacks section there is no callback for the body. I placed the information that I needed in the beforeBody and footeer callbacks. But the data for body is still displayed and I can't change/hide it.
On a screenshot, the number 12 in the body is excess for me. I need modify body data or hide it. I can, of course, specify font 0 for body, but can this be done more elegantly?
Full code:
const chartData = {
labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
datasets: [{
data: [15, 16, 13, 14, 15, 18, 19, 20, 21, 22, 21, 22, 23, 19, 18, 16, 16, 15, 14, 13, 12,12, 12, 12],
fill: true,
borderColor: 'rgb(92, 165, 241)',
backgroundColor: 'rgba(92, 165, 241, 0.1)',
tension: 0.1
}]
};
const myChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: {
plugins: {
legend: {
display: false,
},
datalabels: {
anchor: 'end',
align: 'top',
formatter: Math.round,
color: '#2D2D2D',
},
tooltip: {
displayColors: false,
callbacks: {
labelColor: function(context) {
return {
backgroundColor: 'rgba(92, 165, 241, 0.1)',
};
},
title: function(context) {
},
beforeBody: function(context) {
return `time: ${context[0].label}\ntemp: ${context[0].raw}°\nhmd: 45%`
},
footer: function(context){
return `cloudy`
}
},
backgroundColor: '#74b5f3'
}
},
pointBackgroundColor: 'rgb(92, 165, 241)',
scales: {
y: {
display: false,
beginAtZero: true,
grid: {
display: false,
}
},
x: {
grid: {
display: false,
}
}
},
},
plugins: [ChartDataLabels]
});

remove data display in middle of the bar's and every graph from graphs in chart js

I'm using Chart.js v2.9.3 in sails js
my question is how should I remove the values display in the middle of the bars
config for chat is below
var ChartConfig = {
type: "line",
data: {
labels: [],
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(0, 97, 242, 0.05)",
borderColor: "rgba(0, 97, 242, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(0, 97, 242, 1)",
pointBorderColor: "rgba(0, 97, 242, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 97, 242, 1)",
pointHoverBorderColor: "rgba(0, 97, 242, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: []
}]
},
options: {
maintainAspectRatio: false,
barValueSpacing: 20,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
barThickness: barThickness,
gridLines: {
display: false,
drawBorder: false
},
ticks: {
padding: 10,
// maxTicksLimit: 10
},
stacked: true,
}],
yAxes: [{
ticks: {
maxTicksLimit: 10,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
},
stacked: true,
}]
},
legend: {
display: true,
labels: {
filter: function (item, chart) {
// Logic to remove a particular legend item goes here
return !item.text.includes('Emp_Id') && !item.text.includes('Rel_Id')
}
}
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: "#6e707e",
titleFontSize: 14,
borderColor: "#dddfeb",
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: "index",
caretPadding: 10,
},
plugins: {
colorschemes: {
scheme: ThemeVariable
},
},
}
}
also dous not add anything other then this in any place.
the value with a simple bar graph is ok but with stacked bars and pie and doughnut its looks dirty.
I've attached the screenshot of the graph.graph's spanshot
can anyone help me with this
thank you

Line Chart is not setting backgroundColor when created dynamically Chart.js

Im trying to set multiple datasets in the area chart that will be created dynamically. The datasets are showing in the chart but for some reason, the default background color is not setting for the datasets that where put via my method. Everything else in the method seems to be setting correctly. The Background color is even set correctly in the legend background but it doesn't set on the graph
This is my function
function createNewDataset(data, labels) {
let newDataSet = [];
newDataSet['label'] = "Test";
newDataSet['lineTension'] = 0.3;
newDataSet['backgroundColor'] = "rgba(102,223,56,0.71)";
newDataSet['borderColor'] = "rgb(114,223,52)";
newDataSet['pointRadius'] = 3;
newDataSet['pointBackgroundColor'] = "rgb(91,223,88)";
newDataSet['pointBorderColor'] = "rgb(93,223,65)";
newDataSet['pointHoverRadius'] = 3;
newDataSet['pointHoverBackgroundColor'] = "rgb(89,223,47)";
newDataSet['pointHoverBorderColor'] = "rgb(125,223,72)";
newDataSet['pointHitRadius'] = 10;
newDataSet['pointBorderWidth'] = 2;
newDataSet['data'] = [0, 10000, 5000, 15000, 100000, 20000, 15000, 25000, 20000, 30000, 25000, 40000];
return newDataSet;
}
And this is the hardcoded creation of the dataset
function createLinechart(){
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "Sep", "Oct", "Nov", "Dec"],
datasets: [
createNewDataset(),{
label: "Civic",
lineTension: 0.3,
backgroundColor: "rgba(222,43,223,0.25)",
borderColor: "rgb(223,40,38)",
pointRadius: 3,
pointBackgroundColor: "rgb(223,52,49)",
pointBorderColor: "rgb(223,82,31)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgb(223,40,38)",
pointHoverBorderColor: "rgb(223,40,38)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
},{ label: "Accord",
lineTension: 0.6,
backgroundColor: "rgba(82,119,223,0.54)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 1000, 10000, 2000, 10000, 20000, 25000, 10000, 25000, 40000],}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [3],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: true
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
}
}
});}
Here is an image of the chart.
The line that is popping out of the graph should have a green back ground color like shown in the legend.
![Line chart][1]: https://imgur.com/a/CdvSBPw
EDIT New image with dynamic data. They set everything right except for back ground color again
[Linchart][2]:https://imgur.com/a/6gSLqMp

Based on the current information it sounds like somehow the problem is specific to data coming from the function, although I don't see anything obviously wrong with the function. So instead I would try focusing on the general debugging strategy of simplifying the problem -- in this case simplifying the function to make it closer to the hardcoded data that is working as expected. I suggest something like this, which is about as simple as possible:
function createNewDataset(data, label) {
return {
// change to `label: label` once working:
label: "Test",
lineTension: 0.3,
backgroundColor: "rgba(102,223,56,0.71)",
borderColor: "rgb(114,223,52)",
pointRadius: 3,
pointBackgroundColor: "rgb(91,223,88)",
pointBorderColor: "rgb(93,223,65)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgb(89,223,47)",
pointHoverBorderColor: "rgb(125,223,72)",
pointHitRadius: 10,
pointBorderWidth: 2,
// change to `data: data` once working:
data: [0, 10000, 5000, 15000, 100000, 20000, 15000, 25000, 20000, 30000, 25000, 40000]
};
}

Chart.js configuring x axis so that the spaces are not always equal

createLineChart() {
this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: [10, 11, 17, 18, 19, 23],
datasets: [
{
fill: true,
backgroundColor: '#C4CEE5',
label: 'recorded values',
borderColor: '#C4CEE5',
pointBorderColor: '#ffff',
pointBackgroundColor: '#ffff',
hoverBackgroundColor: '#C4CEE5',
pointRadius: 7,
borderCapStyle: 'square',
borderJoinStyle: 'round',
borderWidth: 1.5,
lineTension: 0,
data: [23, 34, 45, 12, 45, 65],
borderDash: [],
borderDashOffset: 0.0,
spanGaps: false,
}]
},
options : {
legend: {
display: false,
position: 'top',
fullWidth: true,
},
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
suggestMax: max,
maxTicksLimit: 4,
beginAtZero: true,
padding: 30
},
}],
xAxes: [{
ticks: {
min: 0,
maxTicksLimit: 5,
autoSkip: false,
beginAtZero: true,
},
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM D'
},
},
gridLines : {
display : false,
drawBorder: false,
color: 'transparent',
},
}]
},
},
});
};
I have created a chart.js line chart where the values on the x axis are dates. I think by default, chart.js plots data with an equal amount of distance between the points regardless of the value of the data.
I would like it so there is a large space in the chart if the dates are further apart.
I have tried using chart-scatter the plugin for chart.js but have not had much luck as I am using ionic/angular but if you have any experience with it that would be great!
What I would like the chart to look like with more space depending on the x-axis value:

Issues with series.data in highcharts

I'm using a column chart with a slider that redraws the chart after slide operation is invoked. I'm storing each data array in a javascript object and the chart renders according to the slider option. After assigning the initial values for the first slider option, the chart renders correctly but when I slide back to the first position, the chart won't render. And the weird part is when I assign the initial values to a separate variable and the data option is assigned with this variable, the chart renders correctly at every position.
Here's the code:
var data = {
"jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
"feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
"mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
"apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
"may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
"jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
"jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
"aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
"sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
"oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
"nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
"dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
};
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];
var chart = new Highcharts.chart({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 50,
marginLeft: 100,
marginBottom: 50
},
title: false,
exporting: {enabled: false},
xAxis: {
crosshair: true,
tickColor: '#7F7F7F',
lineColor: '#7F7F7F',
tickWidth: 0,
labels: {
step: 5
},
title: {
text: 'x-axis',
align: "left",
x: -10,
rotation: 0,
style: {
"font-size" : "15px"
}
}
},
yAxis: {
min: 0,
title: {
text: 'y-axis',
align: 'high',
rotation: 0,
y: -10,
offset: 0,
style: {
"font-size" : "15px"
}
},
gridLineColor: 'transparent',
lineColor: '#7F7F7F',
lineWidth: 1,
tickWidth: 1,
tickColor: '#7F7F7F',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
step: 2,
formatter: function(){
if(this.value > 999)
return Math.round(this.value/1000) + 'k';
return this.value;
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: someData
}],
credits: false
});
$('#slider_bar').on("slide", function () {
chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});
The initial position of the slider is at jan and the chart renders correctly when I slide back to jan. I'd like to know why the chart won't render when I assign series.data as:
data: data.jan
Any suggestions?

Highchart series.data expects a key value pair, or an array of arrays like
[[x1,y1],[x2,y2]]
or
{
y: [x1,x2]
}
now when you do data = data.jan Highchart is not able to find the Y value because data.jan is a simple array

Found the solution:
instead of writing
data: data.jan
write
data: data.jan.slice()
The slice function does not directly returns the reference of the array, instead it returns a copy of the array. I still wonder why we need to use the slice function in the first place, for this particular situation but it works.