We Keep Coding

Remove redundant legends on the chart using generateLabels with ChartJS v3

I have a chart as follows, I only need one pair of legends (data 1 and data 2) to show on the chart.
In ChartJS v2, I can use generateLabels like this but it doesn't seem to work the same way in v3 that I'm using.
Is there an easy way to achieve this in v3 using generateLabels or do I have to change the DOM structure?
const trend_options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
formatter: function(value, ctx) {
const otherDatasetIndex = ctx.datasetIndex % 2 === 0 ? ctx.datasetIndex + 1 : ctx.datasetIndex - 1;
const total = ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex] + value;
return `${(value / total * 100).toFixed()}%`;
},
font: {
weight: "bold"
},
color: "#fff",
display: function(context) {
let index = context.dataIndex;
let value = context.dataset.data[index];
return value > 0; // display labels with a value greater than 0
}
},
},
scales: {
x: {
stacked: true
},
y: {
stacked: true,
suggestedMax: 15,
ticks: {
beginAtZero: true,
stepSize: 5,
}
}
},
};
const app_data_trend = [{
label: 'data 1',
data: [3, 4, 5, 6, 4, 4, 4],
backgroundColor: '#007bff',
stack: 'Stack 0',
},
{
label: 'data 2',
data: [3, 4, 5, 4, 3, 2, 3],
backgroundColor: '#6DB526',
stack: 'Stack 0',
},
{
label: 'data 1',
data: [4, 4, 4, 3, 2, 5, 4],
backgroundColor: '#007bff',
stack: 'Stack 1',
},
{
label: 'data 2',
data: [4, 2, 5, 2, 3, 3, 4],
backgroundColor: '#6DB526',
stack: 'Stack 1',
},
{
label: 'data 1',
data: [2, 4, 5, 2, 4, 5, 3],
backgroundColor: '#007bff',
stack: 'Stack 2',
},
{
label: 'data 2',
data: [1, 1, 2, 4, 4, 3, 5],
backgroundColor: '#6DB526',
stack: 'Stack 2',
},
]
const ctx8 = document.getElementById("tsa-applications-trending");
const chart8 = new Chart(ctx8, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ['person1', 'person2', 'person3', 'person4'],
datasets: app_data_trend
},
options: trend_options,
});
.chart-container{
position: relative; height:80vh; width:80vw
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div class="chart-container">
<canvas id="tsa-applications-trending"></canvas>
</div>

options.plugins.legend.labels.generateLabels can still be used in Chart.js v3. For your case, this could look as follows:
generateLabels: chart => chart.data.labels.slice(0, 2).map((l, i) => ({
datasetIndex: i,
text: l,
fillStyle: chart.data.datasets[i].backgroundColor,
strokeStyle: chart.data.datasets[i].backgroundColor,
hidden: chart.getDatasetMeta(i).hidden
}))
const trend_options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
datalabels: {
formatter: function(value, ctx) {
const otherDatasetIndex = ctx.datasetIndex % 2 === 0 ? ctx.datasetIndex + 1 : ctx.datasetIndex - 1;
const total = ctx.chart.data.datasets[otherDatasetIndex].data[ctx.dataIndex] + value;
return `${(value / total * 100).toFixed()}%`;
},
font: {
weight: "bold"
},
color: "#fff",
display: function(context) {
let index = context.dataIndex;
let value = context.dataset.data[index];
return value > 0; // display labels with a value greater than 0
}
},
legend: {
labels: {
generateLabels: chart => chart.data.labels.slice(0, 2).map((l, i) => ({
datasetIndex: i,
text: l,
fillStyle: chart.data.datasets[i].backgroundColor,
strokeStyle: chart.data.datasets[i].backgroundColor,
hidden: chart.getDatasetMeta(i).hidden
}))
}
},
},
scales: {
x: {
stacked: true
},
y: {
stacked: true,
suggestedMax: 15,
ticks: {
beginAtZero: true,
stepSize: 5,
}
}
},
};
const app_data_trend = [{
label: 'data 1',
data: [3, 4, 5, 6, 4, 4, 4],
backgroundColor: '#007bff',
stack: 'Stack 0',
},
{
label: 'data 2',
data: [3, 4, 5, 4, 3, 2, 3],
backgroundColor: '#6DB526',
stack: 'Stack 0',
},
{
label: 'data 1',
data: [4, 4, 4, 3, 2, 5, 4],
backgroundColor: '#007bff',
stack: 'Stack 1',
},
{
label: 'data 2',
data: [4, 2, 5, 2, 3, 3, 4],
backgroundColor: '#6DB526',
stack: 'Stack 1',
},
{
label: 'data 1',
data: [2, 4, 5, 2, 4, 5, 3],
backgroundColor: '#007bff',
stack: 'Stack 2',
},
{
label: 'data 2',
data: [1, 1, 2, 4, 4, 3, 5],
backgroundColor: '#6DB526',
stack: 'Stack 2',
},
]
const ctx8 = document.getElementById("tsa-applications-trending");
const chart8 = new Chart(ctx8, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: ['person1', 'person2', 'person3', 'person4'],
datasets: app_data_trend
},
options: trend_options,
});
.chart-container {
position: relative;
height: 80vh;
width: 80vw
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div class="chart-container">
<canvas id="tsa-applications-trending"></canvas>
</div>
The problem with the approach is, that the displayed legend elements are still tied to individual datasets only. If you want to show/hide other datasets as well, you also need to define a legend.onClick function, similar to the one from this answer.

Highcharts make positive numbers in ranges of green and negative ranges of red

I have multiple heatmaps in one container. I wanted to set the color axis so that the positive numbers fall in the green range and the negative numbers in the red range. So I set the colorAxis: minColor to #009933 and colorAxis: maxColor to #ff3300. This is not setting all the negatives to ranges of red and the positives to ranges of red. Can I do that using Highcharts?
Here is my code:
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
Highcharts.chart('container', {
chart: {
type: 'heatmap', },
xAxis: {
categories: ['val1', 'val2', 'val3',]
},
yAxis: [{
title: { text: 'iPhone'},
height: '50%',
lineWidth: 2,
categories: ['google', 'bing', 'bing',]
}, {
title: { text: 'iPad'},
height: '50%',
top: '50%',
offset: 0,
lineWidth: 2,
categories: ['google', 'bing', 'bing',]
}],
accessibility: {
point: {
descriptionFormatter: function (point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
colorAxis: {
// min: -50,
minColor: '#ff3300',
maxColor: '#009933'
},
tooltip: {
formatter: function () {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return `${this.point.value}%`
}
}
}
},
series: [{
borderWidth: 1,
data:[
[0, 0, -10],
[0, 1, 10],
[0, 2, -5],
[1, 0, 21],
[1, 1, -10],
[1, 2, 5],
[2, 0, -13],
[2, 1, 53],
[2, 2, 15],
],
dataLabels: {
enabled: true,
color: '#000000'
}
}, {
borderWidth: 1,
data:[
[0, 0, 15],
[0, 1, 11],
[0, 2, -5],
[1, 0, 25],
[1, 1, -5],
[1, 2, 9],
[2, 0, -14],
[2, 1, 65],
[2, 2, 25],
],
dataLabels: {
enabled: true,
color: '#000000'
},
yAxis: 1,
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="container"></div>

Other way to achieve this is to set color of each data-points inside your heatmap .So , get the series data using heatMapChart.series then use for-loop and access values of each data-points . Finally , update your data-point color i.e : green or red .
Demo Code :
function getPointCategoryName(point, dimension) {
var series = point.series,
isY = dimension === 'y',
axis = series[isY ? 'yAxis' : 'xAxis'];
return axis.categories[point[isY ? 'y' : 'x']];
}
var heatMapChart = Highcharts.chart('container', {
chart: {
type: 'heatmap',
},
xAxis: {
categories: ['val1', 'val2', 'val3', ]
},
yAxis: [{
title: {
text: 'iPhone'
},
height: '50%',
lineWidth: 2,
categories: ['google', 'bing', 'bing', ]
}, {
title: {
text: 'iPad'
},
height: '50%',
top: '50%',
offset: 0,
lineWidth: 2,
categories: ['google', 'bing', 'bing', ]
}],
accessibility: {
point: {
descriptionFormatter: function(point) {
var ix = point.index + 1,
xName = getPointCategoryName(point, 'x'),
yName = getPointCategoryName(point, 'y'),
val = point.value;
return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
}
}
},
tooltip: {
formatter: function() {
return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
}
},
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return `${this.point.value}%`
},
}
}
},
series: [{
borderWidth: 1,
data: [
[0, 0, -10],
[0, 1, 10],
[0, 2, -5],
[1, 0, 21],
[1, 1, -10],
[1, 2, 5],
[2, 0, -13],
[2, 1, 53],
[2, 2, 15],
],
dataLabels: {
enabled: true,
color: '#000000'
},
showInLegend: false
}, {
borderWidth: 1,
data: [
[0, 0, 15],
[0, 1, 11],
[0, 2, -5],
[1, 0, 25],
[1, 1, -5],
[1, 2, 9],
[2, 0, -14],
[2, 1, 65],
[2, 2, 25],
],
dataLabels: {
enabled: true,
color: '#000000'
},
showInLegend: false,
yAxis: 1,
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function() {
return this.value.charAt(0);
}
}
}
}
}]
}
});
//get series...
var dataPoints = heatMapChart.series;
//loop through series
for (var i = 0; i < dataPoints.length; i++) {
//get data inside series..
for (var j = 0; j < dataPoints[i].data.length; j++) {
//update data..
dataPoints[i].data[j].update({
color: dataPoints[i].data[j].options.value > 0 ? '#009933' : '#ff3300' //change value depending on value..
});
}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="container"></div>

Heatmap multiple data labels for the same axis in dynamic way using javascript

I get data set from back end api, it will have multiple data labels for the same x and y-axis.How can i achieve this for 'n' values.
I tried with 1,2, and 4 it was working. But not sure if it is the right approach and how can i achieve for 'n'values adjusting row size and col size.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
min: 0,
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null,
min: 0
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions: {
series: {
borderWidth: 1,
dataLabels: {
enabled: true,
color: '#000000'
},
states: {
inactive: {
opacity: 1
}
}
}
},
series: [{
name: 'Sales per employee',
data: [
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[9, 4, 91]
]
}, {
rowsize: 0.5,
colsize: 0.5,
color: Highcharts.getOptions().colors[0],
data: [
[-0.25, 0.25, 70],
[0.25, 0.25, 60],
[-0.25, -0.25, 65],
[0.25, -0.25, 34]
]
}]
});
Above is the sample code

I think that your idea is quite good, but to align points easier, you can create only columns or rows.
I created a function below that creates new series for points with the same x and y values and align them in one row.
function getSeries(data) {
var i = 0,
k,
dataLength,
movement,
index = 0,
colSize,
limitVal,
series = [{
data: []
}],
newSeries;
for (i; i < data.length; i++) {
if (
data[i + 1] &&
data[i][0] === data[i + 1][0] &&
data[i][1] === data[i + 1][1]
) {
if (newSeries) {
newSeries.data.push(data[i]);
} else {
newSeries = {
data: [data[i]]
}
}
} else {
if (newSeries) {
newSeries.data.push(data[i]);
dataLength = newSeries.data.length;
newSeries.colsize = colSize = 1 / newSeries.data.length;
movement = dataLength % 2 ? 0 : colSize / 2;
limitVal = colSize * Math.floor(dataLength / 2) - movement;
for (k = -limitVal; k <= limitVal; k += colSize) {
newSeries.data[index][0] += k;
index++;
}
series.push(newSeries);
index = 0;
newSeries = null;
} else {
series[0].data.push(data[i]);
}
}
}
return series
}
Highcharts.chart('container', {
...,
series: getSeries(data)
});
Live demo: https://jsfiddle.net/BlackLabel/9Ltxcgn6/

Highcharts how to show certain tooltips and don't show others

I need to show tooltips for only the last two series when hovering the mouse over the graph. In this example the idea will be to show only the tool tips for the values 1699 and 1750. The rest of the values can't show any tooltips when hovering the mouse. How can I achive that? I haven't found any way to do so. Is it possible? Thanks in advance.
(function () {
var categories= ['1350', '1400', '1450', '1500', '1550', '1699', '1750'];
Highcharts.chart('grafica1', {
chart: {
type: 'area',
},
title: {
text: ' '
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff',
}
}
},
series: [{
name: 'Africa',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'L. America',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Oceania',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'S-E. Asia',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Japan',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'China',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Near East',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Asian CIS',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Russia',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'East Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Central Europe',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'W. Europe - Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'Nordic',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'N. America',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafica1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You can use the formatter like this :
tooltip: {
formatter: function() {
if(this.points[0].key < (this.points[0].series.xData.length -2)){
return false;
}
var s = [];
s.push(this.x);
this.points.forEach(function(point) {
s.push('<b>' + point.series.name + '</b>: ' + point.y);
});
return s;
},
split: true
},
Fiddle
Not the cleanest code (there still an error in the console) but it's work.
Edit
Following Deep 3015 comment, code and fiddle updated

You can wrap tooltip.prototype.renderSplit method to show the tooltip only if the points have certain x values.
Highcharts.wrap(Highcharts.Tooltip.prototype, 'renderSplit', function (p, labels, points) {
if (!this.options.showOnLastTwo) {
return p.call(this, labels, points)
}
const point = points[0]
if (point) {
const allowedXs = point.series.xData.slice(-2)
if (allowedXs.includes(point.x)) {
return p.call(this, labels, points)
}
}
this.destroy()
})
And set in tooltip options showOnLastTwo flag to true:
tooltip: {
split: true,
showOnLastTwo: true
},
The flag is not necessary but the wrap changes Highcharts globally so it will affect every chart - the flag will prevent this.
live example: http://jsfiddle.net/sLvekuht/1/

jQuery Flot won't show months in X axis as labels

As said, X axis label is not showing months as expected. What I doing wrong ?
Here is my example code
HTML:
<div id="placeholder"></div>
CSS:
#placeholder {
height: 300px;
}
Javascript:
var d1 = [
[1388530800, 4],
[1393542000, 8],
[1396216800, 3],
[1398808800, 16],
[1401487200, 2],
[1404079200, 2],
[1406757600, 28],
[1409436000, 24],
[1412028000, 0],
[1414710000, 18],
[1417302000, 0],
[1419980400, 11]
];
var d2 = null;
var d3 = null;
var d4 = null;
var d5 = null;
var d6 = [
[1388530800, 2],
[1396303200, 2],
[1398895200, 1],
[1401573600, 1],
[1406844000, 1],
[1409522400, 1],
[1417388400, 1]
];
var data1 = [{
data: d1,
points: {
fillColor: "#d1e399"
},
color: '#d1e399'
}, {
data: d2,
points: {
fillColor: "#ecc0ce"
},
color: '#ecc0ce'
}, {
data: d3,
points: {
fillColor: "#daeaed"
},
color: '#daeaed'
}, {
data: d4,
points: {
fillColor: "#e6ceea"
},
color: '#e6ceea'
}, {
data: d5,
points: {
fillColor: "#edb9a6"
},
color: '#edb9a6'
}, {
data: d6,
points: {
fillColor: "#92e48a"
},
color: '#92e48a'
}];
$.plot($("#placeholder"), data1, {
xaxis: {
mode: "time",
minTickSize: [1, "month"],
tickLength: 1,
ticks: 12
},
yaxis: {
tickSize: 5
},
grid: {
hoverable: true,
borderWidth: 1
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.1
}, {
opacity: 0.13
}]
}
},
points: {
show: true,
lineWidth: 2,
radius: 3
},
shadowSize: 0,
stack: true
},
clickable: true,
hoverable: true
});
Code in JSFiddle -> http://jsfiddle.net/v5M9L/11/
Thanks for your help !

I suspect your problem is that your timestamps are in seconds rather than milliseconds. Multiply all your data by 1000 appears to give the result you want:
{ data: d1.map(function(d) { return [d[0] * 1000, d[1]]; }), points: { fillColor: "#d1e399" }, color: '#d1e399'}
http://jsfiddle.net/v5M9L/12/