HighCharts - barchart not rendering correctly in IE8 - javascript

I have a simple barchart which does not render correctly under IE8 (columns are not visible). It does display correctly with firefox and IE 9+.
I'am using jQuery 1.8.3 and highcharts 3.0.3.
I keep datas in the code sample because the number of columns to draw is important in reproducing the problem. The graph renders correctly in IE8 if I remove one serie.
Here is the code :
$(function () {
$(document).ready(function() {
var barOptions = {
chart: {
renderTo: 'container',
width:450,
height:350,
type: 'column'
},
xAxis: {
categories: [0,1,2,3,4,5,6,7,8,9,10]
},
series: [{
name: 'NC',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'OK',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'KO',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'VALID',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'CHECK',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'COR',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}]
};
barChart = new Highcharts.Chart(barOptions);
});
});
Any ideas on how to fix this ?

As others have said, this looks like a bug in Highcharts. A workaround would be to hide and show one of the series programmatically right after the chart is rendered.
JSFiddle here. Try it in IE8 here.
$(function () {
var barOptions = {
chart: {
renderTo: 'container',
width: 450,
height: 350,
type: 'column'
},
xAxis: {
categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
series: [{
name: 'NC',
data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
}, {
name: 'OK',
data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
}, {
name: 'KO',
data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
}, {
name: 'VALID',
data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
}, {
name: 'CHECK',
data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
}, {
name: 'COR',
data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
}]
};
barChart = new Highcharts.Chart(barOptions);
barChart.series[0].hide();
barChart.series[0].show();
});

It looks like bug, reported to our developers: https://github.com/highslide-software/highcharts.com/issues/2091

Related

Custom Axis labels for Grouped Bar chart

Needed output:
I need to configure a grouped bar chart in which the type of each bar is shown in the axis itself.
I am using chartjs 2.9. How can I add the text "Availability","Co-funded","CPC" in the axis itself. I can't find any configuration which support this implementation in Chart js . Is there any other JS library where this is possible
this.barChart = new .Chart(ctx, {
type: "bar",
data: {
labels: this.barChartData["chart-data"].map((obj) => obj.y),
datasets:
this.barChartData["chart-mapping"].map((obj) => {
return {
label: obj.label,
data: this.barChartData["chart-data"],
backgroundColor: obj.color,
parsing: {
xAxisKey: obj.key,
},
};
}),
},
options: {
datasets: {
barThickness: 20,
},
indexAxis: "y",
plugins: {
legend: { position: "right", align: "start", title: "Type" },
},
},
});
barChartData = {
"chart-mapping": [
{
key: "avi",
label: "Availability..",
color: "rgba(50, 144, 237, 1)",
},
{
key: "cfd",
label: "Co-funded..",
color: "rgba(119, 181, 242, 1)",
},
{
key: "CPC",
label: "CPC",
color: "rgba(157, 83, 242, 1)",
},
{
key: "od",
label: "Order Drop..",
color: "rgba(195, 152, 245, 1)",
},
],
"chart-data": [
{
y: "Name1",
avi: 32,
cfd: 32,
CPC: 57,
od: 12,
},
{
y: "AK",
avi: 15,
cfd: 23,
CPC: 42,
od: 45,
},
{
y: "Name3",
avi: 67,
cfd: 34,
CPC: 21,
od: 43,
},
],
};
Current implementation:

Highcharts - Y axis colors by point

How can I configure the y axis so that it has different colors?
From this:
enter image description here
To this:
enter image description here
JSFIDDLE:
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
lineWidth: 2
},
Maybe someone had a similar problem?
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bar-basic/
You can achieve it by setting yAxis.lineColor as Highcharts.GradientColorObject. Check the demo and code posted below.
Code:
Highcharts.chart('container', {
chart: {
type: 'bar',
events: {
load: function() {
let chart = this,
yAxis = chart.yAxis[0];
yAxis.update({
lineColor: {
linearGradient: [chart.plotLeft + yAxis.width, 0, 0, 0],
stops: [
[0, 'yellow'],
[0.33, 'yellow'],
[0.33, 'red'],
[0.66, 'red'],
[0.66, '#21B04C'],
[1, '#21B04C']
]
}
})
}
}
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
},
yAxis: {
lineWidth: 4
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/7feLmsvq/
API reference:
https://api.highcharts.com/highcharts/yAxis.lineColor
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
https://api.highcharts.com/class-reference/Highcharts.GradientColorObject

Highcharts legend item not displaying properly (until window is resized)

I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):
The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):
I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:
const options: Highcharts.Options = {
chart: {
type: 'spline',
spacingLeft: 40,
spacingRight: 40,
},
title: {
style: {
display: 'none',
},
},
subtitle: {
style: {
display: 'none',
},
},
credits: {
enabled: false,
},
legend: {
itemDistance: 20,
itemStyle: {
color: '#7990A1',
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
lineWidth: 1,
},
shadow: true,
},
},
series: [{
name: 'test1',
type: 'spline',
color: '#576A7B',
data: [23, 3, 33, 54, 29, 38],
},
{
name: 'test2',
type: 'spline',
color: '#FE7B1A',
data: [45, 21, 76, 43, 67, 59],
},
{
name: 'test3',
type: 'spline',
color: '#00BAFF',
data: [7, 19, 5, 9, 12, 11],
},
{
name: 'test4',
type: 'spline',
color: '#000000',
data: [40, 3, 71, 20, 28, 31],
},
],
yAxis: {
title: {
style: {
display: 'none',
},
},
showFirstLabel: false,
},
xAxis: {
categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
},
};
Used by rendering component:
<HighchartsReact highcharts={Highcharts} options={options} />
Help will be greatly appreciated.

ReactJS ApexCharts not displaying tooltip

I take one of the examples posted and slightly modify it by removing some data. When the sets don't have the same number of data points, the tooltips stop displaying.
Please see the following two examples. The first one being the one posted in the docs. The second, the modified version. When hovering starting from the end data points, the tooltip doesn't display anything for the last columns.
Example from docs: https://codepen.io/junedchhipa/pen/YJQKOy
var options = {
chart: {
height: 310,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Series Column',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Series Area',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'Series Line',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85,0.25,1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
legend: {
show: false
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
// check if the checkbox has any unchecked item
checkLegends()
function checkLegends() {
var allLegends = document.querySelectorAll(".legend input[type='checkbox']")
for(var i = 0; i < allLegends.length; i++) {
if(!allLegends[i].checked) {
chart.toggleSeries(allLegends[i].value)
}
}
}
// toggleSeries accepts a single argument which should match the series name you're trying to toggle
function toggleSeries(checkbox) {
chart.toggleSeries(checkbox.value)
}
Modified example:
https://codepen.io/mmk2118/pen/mdbpOWN
var options = {
chart: {
height: 310,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Series Column',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Series Area',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41]
}, {
name: 'Series Line',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85,0.25,1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
legend: {
show: false
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
// check if the checkbox has any unchecked item
checkLegends()
function checkLegends() {
var allLegends = document.querySelectorAll(".legend input[type='checkbox']")
for(var i = 0; i < allLegends.length; i++) {
if(!allLegends[i].checked) {
chart.toggleSeries(allLegends[i].value)
}
}
}
// toggleSeries accepts a single argument which should match the series name you're trying to toggle
function toggleSeries(checkbox) {
chart.toggleSeries(checkbox.value)
}
Your codepen example uses an older version of ApexCharts.
Please update by pulling the latest version here
https://cdn.jsdelivr.net/npm/apexcharts#latest
Also, if you have a different number of data-points in each series, you can turn off shared tooltip and only show the tooltip when the user hovers over bars/markers directly.
tooltip: {
shared: false,
intersect: true
}

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/

Categories