I'm trying to understand the tooltip functionality of Flot but not really getting my head around it!
I am trying to achieve a tooltip that displays the label and value of each section of a stacked bar chart
Would someone be able to point my towards an example of this or provide code for doing so?
The following code works for my Flot stacked bar chart, based on the Flot example that shows data point hover. The trick is that the 'item' values in the stacked chart are cumulative, so the 'y' value displayed in the tool tip has to first subtract the datapoint for the bars underneath.
var previousPoint = null;
$("#chart").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1] - item.datapoint[2];
showTooltip(item.pageX, item.pageY, y + " " + item.series.label);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
I did not find this in the Flot documentation, but the item.datapoint array seemed to contain what I needed in practice.
The code above caused redraw-issues for me.
Here is an improved code:
var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint[0] != item.datapoint[0]
|| previousPoint[1] != item.datapoint[1]
|| previousPoint[2] != item.datapoint[2]
) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1] - item.datapoint[2];
showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0) );
}
}
else {
$("#tooltip").remove();
previousPoint = [0,0,0];
}
});
This is the same as Thomas above, except that I shifted the tooltip up to prevent it blocking the hover action.
var previousPoint = [0,0,0];
$("#regionsChart").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint[0] != item.datapoint[0]
|| previousPoint[1] != item.datapoint[1]
|| previousPoint[2] != item.datapoint[2]
) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1] - item.datapoint[2];
showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0) );
}
}
else {
$("#tooltip").remove();
previousPoint = [0,0,0];
}
});
The solution is using tooltipOpts -> content method with a callback function to properly return dynamic data to the label.
I figured out that passing a 4th argument to the callback function of the "tooltipOpts" actually gives you the whole data object from which the chart/graph is constructed from.
From here, you can easily extract the X axis labels, using the second argument of this same function as the index of the label to extract.
EXAMPLE:
Data object I'm passing to the plot function:
[
{ data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] }
],
{
bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
colors: ['#fcc100'],
series: { shadowSize: 3 },
xaxis: {
show: true,
font: { color: '#ccc' },
position: 'bottom',
ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']]
},
yaxis:{ show: true, font: { color: '#ccc' }},
grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
tooltip: true,
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' stories created about your page on ' + XdataLabel
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
}
Bar chart rendered from the above data object:
As you can see on the image preview, the logic used to render the label's content dynamically form the actual data is this:
tooltipOpts: {
content: function(data, x, y, dataObject) {
var XdataIndex = dataObject.dataIndex;
var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label;
return y + ' stories created about your page on ' + XdataLabel;
},
defaultTheme: false,
shifts: { x: 0, y: -40 }
}
Related
I have installed the crosshair plugin and am using chartJS 3.0 to take advantage of the candlestick charts but the crosshair does not appear. are these things compatible together? my data appear no problem but the crosshair never appears. how do i use these two things together? are there any working examples?
the tags i am using
<script src="https://cdn.jsdelivr.net/npm/luxon#1.24.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0-beta.9/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#0.2.1"></script>
<script src="https://dd7tel2830j4w.cloudfront.net/f1614793727236x392906938665549250/chartjs-chart-financial.js"></script>
<script scr="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair"></script>
and the chart code which also works
var divID = "chartContainer" + properties.chartid
var chartID = "myChart" + properties.chartid
instance.canvas.append('<div id="' + divID + '"></div>')
document.getElementById(divID).innerHTML = ' ';
document.getElementById(divID).innerHTML = '<canvas id=' + chartID + ' width="' + properties.bubble.width() + '" height="' + properties.bubble.height() + '"></canvas>';
var ctx = document.getElementById(chartID).getContext('2d');
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: getData()
}]
},
options: {
scales: {
y: {
min: 0,
max: 500
}
},
tooltips: {
mode: "interpolate",
intersect: false
},
plugins: {
crosshair: {
line: {
color: '#F66', // crosshair line color
width: 3, // crosshair line width
dashPattern: [5, 5] // crosshair line dash pattern
},
sync: {
enabled: true, // enable trace line syncing with other charts
group: 1, // chart group
suppressTooltips: false // suppress tooltips when showing a synced tracer
},
zoom: {
enabled: true, // enable zooming
zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
zoomboxBorderColor: '#48F', // border color of zoom box
zoomButtonText: 'Reset Zoom', // reset zoom button text
zoomButtonClass: 'reset-zoom', // reset zoom button class
},
callbacks: {
beforeZoom: function(start, end) { // called before zoom, return false to prevent zoom
return true;
},
afterZoom: function(start, end) { // called after zoom
}
}
}
}
}
});
function getData() {
var dates = properties.time.get(0, properties.time.length())
var opens = properties.open.get(0, properties.open.length())
var highs = properties.high.get(0, properties.high.length())
var lows = properties.low.get(0, properties.low.length())
var closes = properties.close.get(0, properties.close.length())
let data = []
for (i = 0; i < dates.length; i++) {
data.push({
t: dates[i].valueOf(),
o: opens[i],
h: highs[i],
l: lows[i],
c: closes[i]
})
}
console.log(data)
return data
}
chart.update()
The crosair plugin is not yet compatible with the new beta of version 3. They have a pr to be up to date with beta 11 but after that there have been breaking changes again. So you will have to update the plugin yourself or wait till it has been updated to support v3
You have a html table and you want to show sparkline charts from your data, exactly as in this example (from highcharts demos):
https://codepen.io/_dario/pen/rNBOGVR
Highcharts suggested code follows:
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function(a, b, c) {
var hasRenderToArg = typeof a === 'string' || a.nodeName,
options = arguments[hasRenderToArg ? 1 : 0],
defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
hideDelay: 0,
outside: true,
shared: true
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return hasRenderToArg ?
new Highcharts.Chart(a, options, c) :
new Highcharts.Chart(options, b);
};
var start = +new Date(),
$tds = $('td[data-sparkline]'),
fullLen = $tds.length,
n = 0;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
However, in my use case, the data in the table (and the data-sparkline attribute) are not hard-coded like in the example, but loaded and displayed via an AJAX call, similar to below.
//here a table row gets compiled
var tableRow = '<tr id="row_' + word.id + '">';
//this is where the sparkline data go
tableRow += '<td class="has-sparkline"></td></tr>';
//the row gets appended to tbody
$('#wordstable tbody').append(tableRow);
//finally the sparkline data are attached
//data are a simple string such as "1,2,3,4,5"
var rowId = '#row_'+word.id;
var rowIdTd = rowId + ' td.has-sparkline';
$(rowIdTd).data('sparkline',word.sparkline);
This breaks the example logic and I can't have Highcharts "see" the data.
No particular error is returned (as the data, as far as Highcharts is concerned, just isn't there, so there's nothing to do).
The doChunk bit just does all the processing in advance, and when you add your row it is no longer processing. One way of dealing with this is pulling out the part that creates a single chart into a separate function (makeChart) and when you are doing your processing you use that part directly to create your sparkline.
For example, doChunk with split out makeChart:
function makeChart(td) {
$td = td;
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
}
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
makeChart($($tds[i]));
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
And then a basic example of your ajax-code:
function ajaxIsh() {
var word = {
name: 'Bird', // is the word
id: 'bird',
sparkline: '1, 2, 3, 4, 5'
};
//here a table row gets compiled
var tableRow = '<tr id="row_' + word.id + '">';
//this is where the sparkline data go
tableRow += '<th>'+word.name+'</th><td class="has-sparkline"></td></tr>';
//the row gets appended to tbody
$('#table-sparkline tbody').append(tableRow);
//finally the sparkline data are attached
//data are a simple string such as "1,2,3,4,5"
var rowId = '#row_'+word.id;
var rowIdTd = rowId + ' td.has-sparkline';
$(rowIdTd).data('sparkline',word.sparkline);
makeChart($(rowIdTd));
}
See this JSFiddle demonstration of it in action.
This is the first time I'm using ChartJS v2.
I creating a simple line chart with several datasets.
I have 3 problems:
1 - It has the correct data shown, but I have a problem with the legends, as they appear left aligned with the color box out of the canvas, and one per line like in the image bellow (https://i.stack.imgur.com/c9qBe.png).
I want the legends like float: left; in css.
2 - Other problem is the tooltips, they're very big.. like shown in the image bellow. (https://i.stack.imgur.com/txXCF.png)
I tried to find the options to achieve this but it hard for me to make it work.
3 - I want the interval in the y-axis to be 1 not 0.1.
Bellow is the JS code used to create the chart:
var scripts = $(".sending-data");
var datasets = [];
var days = [];
var counter = 0;
scripts.each(function (index, script){
var json = JSON.parse(script.innerHTML);
var data = [];
for (var i = 0; i<json.DATA.length; i++) {
data.push(json.DATA[i][2]);
if (counter === 0)
days.push(json.DATA[i][1].substr(8, 2));
}
var r = Math.floor((Math.random() * 255) + 1);
var g = Math.floor((Math.random() * 255) + 1);
var b = Math.floor((Math.random() * 255) + 1);
var rgbStr = r+ ", " +g + ", " + b;
console.log(rgbStr);
datasets.push({
label: "## " + $(script).attr("data-send-id"),
backgroundColor: 'rgba('+rgbStr+', 0.2)',
borderColor: 'rgba('+rgbStr+', 1)',
borderWidth: 2,
lineTension: 0.1,
data: data,
fill: false
});
counter++;
});
var config ={
type: 'line',
data: {
labels: days,
datasets: datasets
},
options: {
title: {
display: true,
text: 'Custom Chart Title'
},
responsive : true,
legend: {
fullWidth: false,
boxWidth: 50,
padding: 40,
position: "top",
display: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1
}
}]
}
}
};
var ctx = document.querySelector("##canvas-chart").getContext("2d");
console.log(document.querySelector("##canvas-chart"));
var myLine = new Chart(ctx, config);
Dont mind the '##' selector, I'm using CFusion.
Any help from you guys?
--DISCLAIMER--
I managed to set the stepSize: 1 so the interval is 1. But still have the problem (1) and (2)
Thanks in advance!
Happy Programming!
So the problem is this - I'm dumb..
hahaha
The dataset labels had a lot of whitespace... so I just replaced all " " by "" and it showed correctly..
Thanks to all of you.
Cheers and happy programming!
Currently, I'm using jspdf latest version and jspdf-AutoTable 2.1.0 latest version in order to create a PDF with a very complicated table.
It works like a charm in Chrome and FireFox (big surprise!) but in IE10, it's rendering the pdf awfully (another big surprise!)
This is the output of one of the most extensive tables in pdf on chrome (Currently empty)
This is the pdf that IE10 renders
As you can see, it's not wrapping the column header as it should, nor it's expanding and showing the first columns cells and cropping the text inside them.
In order to mantain my custom table style, with it's content correct styling, I adjusted and created my own GetTableJSON method, so I can retrieve and store each individual cell style and apply it later on the createdHeaderCell and createdCell hooks
This is the complete code used in order to create this pdf with it's custom style
function DownloadSchedulePDF() {
var orientation = landscape ? 'l' : 'p'
var doc = new jsPDF(orientation, 'pt', paperFormat);
doc.text('Header', 40, 50);
var res = GetTableJSON($(".scheduleGrid table"));
tableCellsStyles = res.styles;
doc.autoTable(res.columns, res.data, {
theme: 'plain',
startY: 60,
pageBreak: 'auto',
margin: 20,
width: 'auto',
styles: {
lineWidth: 0.01,
lineColor: 0,
fillStyle: 'DF',
halign: 'center',
valign: 'middle',
columnWidth: 'auto',
overflow: 'linebreak'
},
createdHeaderCell: function (cell, data) {
ApplyCellStyle(cell, "th", data.column.dataKey);
},
createdCell: function (cell, data) {
ApplyCellStyle(cell, data.row.index, data.column.dataKey);
},
drawHeaderCell: function (cell, data) {
//ApplyCellStyle(cell, "th", data.column.dataKey);
//data.table.headerRow.cells[data.column.dataKey].styles = cell.styles;
//ApplyCellStyle(data.table.headerRow.cells[data.column.dataKey], "th", data.column.dataKey);
},
drawCell: function (cell, data) {
if (cell.raw === undefined)
return false;
if(cell.raw.indexOf("*") > -1) {
var text = cell.raw.split("*")[0];
var times = cell.raw.split("*")[1];
doc.rect(cell.x, cell.y, cell.width, cell.height * times, 'FD');
doc.autoTableText(text, cell.x + cell.width / 2, cell.y + cell.height * times / 2, {
halign: 'center',
valign: 'middle'
});
return false;
}
}
});
doc.save("schedule " + selectedDate.toLocaleDateString() + ".pdf");
}
function ApplyCellStyle(cell, x, y) {
if(!pdfInColor)
return;
var styles = tableCellsStyles[x + "-" + y];
if (styles === undefined)
return;
cell.styles.cellPadding = styles.cellPadding
cell.styles.fillColor = styles.fillColor;
cell.styles.textColor = styles.textColor;
cell.styles.font = styles.font;
cell.styles.fontStyle = styles.fontStyle;
}
Object.vals = function (o) {
return Object.values
? Object.values(o)
: Object.keys(o).map(function (k) { return o[k]; });
}
// direct copy of the plugin method adjusted in order to retrieve and store each cell style
function GetTableJSON (tableElem, includeHiddenElements) {
includeHiddenElements = includeHiddenElements || false;
var columns = {}, rows = [];
var cellsStyle = {};
var header = tableElem.rows[0];
for (var k = 0; k < header.cells.length; k++) {
var cell = header.cells[k];
var style = window.getComputedStyle(cell);
cellsStyle["th-" + k] = AdjustStyleProperties(style);
if (includeHiddenElements || style.display !== 'none') {
columns[k] = cell ? cell.textContent.trim() : '';
}
}
for (var i = 1; i < tableElem.rows.length; i++) {
var tableRow = tableElem.rows[i];
var style = window.getComputedStyle(tableRow);
if (includeHiddenElements || style.display !== 'none') {
var rowData = [];
for (var j in Object.keys(columns)) {
var cell = tableRow.cells[j];
style = window.getComputedStyle(cell);
if (includeHiddenElements || style.display !== 'none') {
var val = cell
? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined
? cell.childNodes[0].textContent + (cell.getAttribute("rowSpan") ? "*" + cell.getAttribute("rowSpan") : '')
: cell.textContent.trim()
: '';
cellsStyle[(i-1) + "-" + j] = cell
? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined
? AdjustStyleProperties(window.getComputedStyle(cell.childNodes[0]))
: AdjustStyleProperties(window.getComputedStyle(cell))
: {};
rowData.push(val);
}
}
rows.push(rowData);
}
}
return {columns: Object.vals(columns), rows: rows, data: rows, styles: cellsStyle}; // data prop deprecated
};
function AdjustStyleProperties(style) {
return {
cellPadding: parseInt(style.padding),
fontSize: parseInt(style.fontSize),
font: style.fontFamily, // helvetica, times, courier
lineColor: ConvertToRGB(style.borderColor),
lineWidth: parseInt(style.borderWidth) / 10,
fontStyle: style.fontStyle, // normal, bold, italic, bolditalic
overflow: 'linebreak', // visible, hidden, ellipsize or linebreak
fillColor: ConvertToRGB(style.backgroundColor),
textColor: ConvertToRGB(style.color),
halign: 'center', // left, center, right
valign: 'middle', // top, middle, bottom
fillStyle: 'DF', // 'S', 'F' or 'DF' (stroke, fill or fill then stroke)
rowHeight: parseInt(style.height),
columnWidth: parseInt(style.width) // 'auto', 'wrap' or a number
//columnWidth: 'auto'
};
}
function ConvertToRGB(value) {
if (value === undefined || value === '' || value === "transparent")
value = [255, 255, 255];
else if (value.indexOf("rgb") > -1)
value = value.replace(/[^\d,]/g, '').split(',').map(function (x) { return parseInt(x) });
else if (value.indexOf("#") > -1)
value = value.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
, function (m, r, g, b) { return '#' + r + r + g + g + b + b })
.substring(1).match(/.{2}/g)
.map(function (x) { return parseInt(x, 16) });
else if (Array.isArray(value))
return value;
else {
var canvas, context;
canvas = document.createElement('canvas');
canvas.height = 1;
canvas.width = 1;
context = canvas.getContext('2d');
context.fillStyle = 'rgba(0, 0, 0, 0)';
// We're reusing the canvas, so fill it with something predictable
context.clearRect(0, 0, 1, 1);
context.fillStyle = value;
context.fillRect(0, 0, 1, 1);
var imgData = context.getImageData(0, 0, 1, 1);
value = imgData.data.slice
? imgData.data.slice(0, 3)
: [imgData.data[0], imgData.data[1], imgData.data[2]];
}
return value;
}
Edit:
As requested, this is the table HTML and the JSON for the tableCellStyles variable
https://jsfiddle.net/6ewqnwty/
Due to the size of the table and the amount of characters for the HTML and the JSON, I set them in a separate fiddle.
Edit 2:
I just made the fiddle runnable, being able to reproduce the issue.
https://jsfiddle.net/6ewqnwty/1/
Not perfectly as I have it in my application, I'm able to retrieve the pdf with the styling, only missing the columns headers text, but at least the issue when downloading the pdf on IE is still present
Running your example I get NaN for cellPadding. This is also probably the reason it does not work with the latest version. You could do something simple such as adding:
cell.styles.cellPadding = styles.cellPadding || 5;
in ApplyCellStyle. The reason you get NaN is that IE apparantly returns empty string instead of '0px' which chrome etc does.
Also note that you would not need to parse the html table yourself if you upgrade since cell.raw is set to the html element in the latest version. This means that you could parse the style with something like window.getComputedStyle(cell.raw).
I often have to show serieses with many points and I want to set dataLabels for some points. This works fine, but when the series has too many points, the dataLabel is not visible in the beginning. When I zoom into the series, I can see that it is displayed correctly.
So my question: Is there a way to show the dataLabel always for such a series?
Here is my JSFiddle: http://jsfiddle.net/Charissima/9aB6B/
dataLabel at 51.
$(function() {
var myData = [];
for (var i = 0; i < 50; i++) {
myData.push(i + Math.random() * 3);
}
myData.push(51);
for (var i = 52; i < 400; i++) {
myData.push(i + Math.random() * 3);
}
chart = $('#container').highcharts('StockChart', {
chart : {
zoomType: 'x',
events : {
load : function() {
myChart = this;
mySeries = this.series[1];
},
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: setDataLabels
}
}
},
series: [
{
name: 'Label51',
id : 'dataseries',
color: 'blue',
data: myData
}
]
});
function setDataLabels() {
if (this.y == 51) {
return this.y;
} else {
return null;
}
}
});
This is caused by dataGoruping - disable it and will work fine.