Include hidden series in exported CSV using Highcharts v8.0 - highcharts

I have a working Highcharts bar chart with 2 series that exports to CSV correctly. I added a hidden ROUND series that should be included in the exported CSV data. Setting the includeInDataExport property to true is supposed make this happen. However, this is not working for me and I've not found an example showing how to correctly use this property.
Here are the current chart options.
{
chart: {
type: "bar"
marginTop: 30
spacingRight: 50
style: {
fontWeight: "400",
fontFamily: "Montserrat"
}
},
title: {
text: ""
}
xAxis: {
categories: Array(7),
lineWidth: 1
}
yAxis: {
min: 0,
lineWidth: 1
}
legend: {
reversed: true,
itemStyle: {
}
}
tooltip: {
headerFormat: "COMPANY: {point.x}<br/>",
pointFormat: "{series.name}: <b>${point.y}</b>"
}
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
includeInDataExport: true
},
series: {
colorByPoint: true,
includeInDataExport: true
}
}
series: [
{
name: "ROUND",
data: [
0,
0,
0,
0,
0,
0,
0
],
visible: false,
showInLegend: false
},
{
name: "P2",
data: [
230.3,
228.25,
217.72,
243.34,
235.56,
205.73,
252.83
]
},
{
name: "P1",
data: [
115.15,
115.58,
104.2,
115.58,
113.34,
101.27,
121.3
]
}
]
}}

It seems that the current Highcharts logic doesn't allow to get CSV data from series which has visible set to false, see: https://github.com/highcharts/highcharts/blob/master/js/modules/export-data.src.js#L350
From this code, it seems like in the past someone has a purpose in it because of some bug, but I am not sure what to think about it now. If you want you can start a thread in the Highcharts Github issue channel: https://github.com/highcharts/highcharts/issues
As a workaround I suggest to use this logic just without this condition about series visibility:
Demo: https://jsfiddle.net/BlackLabel/n5za1q3x/
this.series.forEach(function(series) {
var keys = series.options.keys,
pointArrayMap = keys || series.pointArrayMap || ['y'],
valueCount = pointArrayMap.length,
xTaken = !series.requireSorting && {},
xAxisIndex = xAxes.indexOf(series.xAxis),
categoryAndDatetimeMap = getCategoryAndDateTimeMap(series, pointArrayMap),
mockSeries, j;
if (series.options.includeInDataExport !== false &&
!series.options.isInternal // #55
) {
.........

Related

Stacked Bar Highcharts how to show the values

How to static values in stacked bar chart. Below is the code i am using
$(function () {
Highcharts.chart('container5', {
chart: {
type: 'bar'
},
title: {
text: null
},
xAxis: {
categories: [''],
lineWidth: 0, // STEP TWO
tickWidth: 0, // STEP ONE
labels: {
enabled: false
},
},
yAxis: {
min: 0,
title: {
text: ' '
},
labels: {
enabled: false,//default is true
},
gridLineWidth: 0,
minorGridLineWidth: 0,
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
},
column: { //at the top bar chart values
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
},
bar: {
dataLabels: {
enabled: true,
distance: -50,
formatter: function () {
var dlabel = this.series.name + '<br/>';
// dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
}
},
series: [{
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}, {
showInLegend: false,
name: '20',
data: [20]
}]
});
});
It is the output and refer the attachment.
In the screenshot marked in red rectangular box, want to show the values. Refer the screenshot attached below
Original Screenshot (sample one)
Like this screenshot i need to show the values at the top which can be seen at the top.
You can define multiple data labels and position one of them at the top of the column, for example:
series: [{
...,
dataLabels: [{}, {
format: '20yrs',
y: -100
}]
}, ...]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4909/
API Reference: https://api.highcharts.com/highcharts/series.bar.dataLabels
Added,
y: -100 to the bar.dataLabel option (before the formatter) .
Image Output:
enter image description here
At the top of the label some of the name is missing:
5-9yrs & 15-20yrs ..printing alternatively
and also inside the stacked bar chart, values "20" not get displayed.

Start x axis at minimum value

I am trying to set the start of drawing column data from a minimum value, but cannot figure out how to do this. That is, that the axis starts with a value of -43, and not with 0 (see screenshots).
what i have
I want to get something like this:
what i want
chart: {
renderTo: 'container',
backgroundColor: 'transparent'
},
tooltip: {
formatter() {
return `${moment(this.x).format('MMM DD')}: ${this.y.toFixed(2)}`;
}
},
plotOptions: {
column: {
pointStart: -50,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
title: {
text: ''
},
yAxis: {
plotLines: [{
zIndex: 1,
color: '#5c5c5c',
value: 0,
width: 3,
}],
title: {
text: ''
}
},
xAxis: {
gridLineWidth : 1,
labels: {
formatter() {
return moment(this.value).format('MMM DD');
}
}
},
legend: {
enabled: false
},
series: [{
data: [...this.monthData.resultByDays.map(res => [res.date, res.result])],
type: 'column'
}]
I think that a good approach will be to use the columnrange series rather than basic column. In the columnrange it is possible to set the range where the point could start from.
Demo: https://jsfiddle.net/BlackLabel/ur6qgnbz/
And the code to hide the '-60' data label:
dataLabels: {
enabled: true,
formatter() {
if(this.y === -60) {
return false
} else {
return this.y
}
}
}
API: https://api.highcharts.com/highcharts/plotOptions.columnrange

How do I set the highchart gantt headers as fixed when I scroll vertically

I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.
The next problem that I'm dealing with is that I have many rows of data in the Gantt chart. I've added vertical scrolling capabilities, but the headers above the chart disappear when scrolling. I've found examples where the headers don't scroll, but am unable to determine what in the code keeps the headers in place.
Here's the fiddle: https://jsfiddle.net/eddiem9/h9qw5rsj/15/
chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
minHeight: 700
},
plotOptions: {
series: {
color: '#FF0000'
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Irrigation Schedule',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '24px'
}
},
tooltip: {
pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
labels: {
format: '{value:%H}' // hour of the day (not working)
},
tickInterval: 1000 * 60 * 60, // HOUR
}, {
labels: {
format: '{value:%B %e}' // day name of the week
},
tickInterval: 1000 * 60 * 60 * 24, // Day
}
],
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Pump'
},
categories: map(series, function (s) {
return s.PumpName;
})
}, {
title: {
text: 'Zone'
},
categories: map(series, function (s) {
return s.IrrigationZoneName;
})
}, {
title: {
text: 'Status'
},
categories: map(series, function (s) {
return s.CurrentStatus;
})
}
]
}
}
})
Thanks in advance!
Eddie
You were so close to making it work, you just had a small mistake. scrollablePlotArea object must be defined inside the chart object.
Demo: https://jsfiddle.net/BlackLabel/bu5hfxm1/
chart: {
scrollablePlotArea: {
minHeight: 700
}
},
API: https://api.highcharts.com/gantt/chart.scrollablePlotArea
EDIT:
After digging into the issue I think that a better option will be use the scrollbar for the yAxis than scrollablePlotArea.
Demo: https://jsfiddle.net/BlackLabel/s013uqa5/
stock module is required
Example of the options config for yAxis:
scrollbar: {
enabled: true,
showFull: false
},
max: 5,
API: https://api.highcharts.com/highstock/yAxis.scrollbar

Apply Background Image to A Column

I am using Highcharts to create a column chart with two data points. There's only one series. I am using styling to make each column a different color, but I would also like to add a background image behind each column. I've tried using pattern fill, but it repeats the image for the whole area of the column, whereas I just need a single 30x30 image at the bottom of each column. I also tried using chart.renderer.image to add the svg image and managed to position it well, but can't make the image responsive (chart will be viewed on tablets and mobile devices in addition to computer screens).
My chart details are below:
const categoryColors = {
'cat1': '#ff9800',
'cat2': '#8256ce'
};
Highcharts.chart('gap_bar_chart', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['cat1','cat2'],
labels: {
useHTML: true,
formatter: function () {
console.log(this);
return '<span style="color: ' +categoryColors[this.value] + '">'+this.value+'</span>';
}
},
},
yAxis: {
min: 0,
title: {
useHTML: true,
text: '<b>Percent Earning Junior Status</b>'
},
labels: {
format: "{value} %"
},
lineWidth: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent'
},
tooltip: {
headerFormat: '<table><tr><th>Percent of Students Earning Junior Status within 2 Years</th></tr><tr><th><hr/></th></tr>',
pointFormat: '<tr><td><b>{point.name}</b>: {point.y: .0f}% ({point.numberStr} students)</td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
legend: {
enabled: false
},
series: [{
data: [
{
y: chartData.p_jun2yr_nongap*100 || 0,
total: chartData.n_jun2yr_nongap,
color: '#FCCA7D',
category: 'Non-URM',
name: 'Non-URM',
numberStr: chartData.n_jun2yr_nongap.toLocaleString()
},
{
y: chartData.p_jun2yr_gap*100 || 0,
total: chartData.n_jun2yr_gap,
color: '#9675CF',
category: 'cat2',
name: 'cat2',
numberStr: chartData.n_jun2yr_gap.toLocaleString()
}
]
}]
});
Here is what I would like to accomplish: https://imgur.com/a/oTG34G6
In render event you can use Highcharts.SVGRenderer.image to add the image and make its position and size dynamically dependent on the column:
events: {
render: function() {
var chart = this,
shape,
points = this.series[0].points;
if (chart.customImages) {
chart.customImages.forEach(function(el) {
el.destroy();
});
chart.customImages.length = 0;
} else {
chart.customImages = [];
}
points.forEach(function(p) {
shape = p.shapeArgs;
chart.customImages.push(
chart.renderer.image(
'https://www.highcharts.com/samples/graphics/sun.png',
shape.x + chart.plotLeft + shape.width / 2 - shape.width / 2,
shape.y + chart.plotTop + shape.height - shape.width,
shape.width,
shape.width
).attr({
zIndex: 3
}).add()
);
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/eLwv9ruh/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

Highcharts bubble chart dataLabels overlapping despite z-index

I have a problem with the bubble chart. In fact, i have some points which have the same coordinates with a different name and maybe a different size (z point). For these points, i have a superposition of labels. The z-index solution doesn't work (https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlappinghttps://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping).
Does anyone know of any solution to this problem ?
I thought to do a label connector like the pie chart but i do not how to do.
My code :
$(function () {
$('#container').highcharts({
credits: {
enabled: false
},
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories:['R0', 'R1', 'R2','R3', 'R4', 'R5', 'R6']
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
bubble: {
dataLabels: {
enabled: true,
useHTML: true,
//inside: false,
//y:-10,
//overflow: false,
//crop: false,
style: { textShadow: 'none',fontSize: '10px',color:'black' },
formatter: function() {
return "<i>" + this.point.name.split(' ').join('<br>') + "</i>";
}
},
tooltip : {
headerFormat: '<b>{series.name}</b><br>',
pointFormat : 'S : <i>{point.name}</i><br>Y : {point.y}<br>Num : {point.z}'
}
}
},
series: [
{
name: 'Sample1',
marker: { fillColor: '#89A54E' },
data: [
{ name:'A',x:2,y:0.0,z:47},
{ name:'Z',x:3,y:1.0,z:35},
{ name:'E',x:4,y:0.5,z:9},
{ name:'R',x:0,y:1.0,z:34},
{ name:'T',x:3,y:0.0,z:37},
{ name:'T',x:2,y:0.0,z:22},
{ name:'p',x:0,y:1.0,z:39},
{ name:'m',x:2,y:0.5,z:47},
{ name:'h',x:0,y:0.5,z:48},
{ name:'l',x:5,y:1.0,z:25},
]
},
{
name: 'Sample2',
marker: { fillColor: '#92A8CD' },
data: [
{ name:'AB',x:2,y:0.5,z:23},
{ name:'CA',x:6,y:0.5,z:19},
{ name:'OP',x:3,y:0.5,z:21},
{ name:'CP',x:1,y:0.75,z:38},
{ name:'TS',x:3,y:1.0,z:13},
{ name:'SP',x:0,y:1.0,z:43},
{ name:'SE',x:4,y:1.0,z:2},
{ name:'CS',x:6,y:0.5,z:48},
{ name:'CL',x:1,y:0.5,z:5},
{ name:'H',x:1,y:0.0,z:11},
]
}
]
});
});
Apparently there is a labelrank property on the Highcharts point objects that can be used to dictate which point labels are on top. It can be used when you're creating your data like this:
data: [{
x: 1, y: 1, labelrank: 1, name: 'A'
},{
x: 1, y: 1, labelrank: 2, name: 'B'
}]
Or it can be updated on an individual point to bring that point's dataLabel to the front by doing something like this: chart.series[0].points[0].update({labelrank: 3});
I had a similar issue and created this question on SO that just was answered.
EDIT
They have updated their docs to include series.data.labelrank as well: http://api.highcharts.com/highcharts#series.data.labelrank

Resources