Highcharts won't connect points in a line chart series if all the values in the array are 0 when a gradient is used.
Sample Code:
http://jsfiddle.net/p2EYM/20/
This seems to be related to the now closed issue found here. Does anyone know if there is there a workaround for this?
var colors = ['#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'];
var applyGradient = function(color) {
return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
]
};
};
//works if you comment this out.
colors = $.map(colors, applyGradient);
$('#container').highcharts({
colors: colors,
title: {
text: 'Points with zero value are not connected by line'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
offset: 0,
},
plotOptions: {
series: {
connectNulls: true
}
},
yAxis: {
min: 0,
},
series: [{ data: [2, 10, 40, 40, 40, 40, 40, 40, 40, 40, 30, 20] },
{ data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
]
});
If you move the "colors = $.map(colors, applyGradient);" line to after you call highcharts it should work.
//works if you comment this out.
colors = $.map(colors, applyGradient);
Updated example: http://jsfiddle.net/jQQF5/
This is 'bug' for Highcharts, and in general for SVG, see this.
Related
I am integrating column range chart but I want the column to appear as an arrow. The arrow could be facing downward / upwards based on if the value is increased or decreased.
I can't seem to find any workaround to achieve this.
Below is a reference picture of what I am trying to achieve..
Highcharts.chart('container', {
chart: {
type: 'columnrange',
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Temperatures',
data: [
[-9.9, 10.3],
[-8.6, 8.5],
[-10.2, 11.8],
[-1.7, 12.2],
[-0.6, 23.1],
[3.7, 25.4],
[6.0, 26.2],
[6.7, 21.4],
[3.5, 19.5],
[-1.3, 16.0],
[-8.7, 9.4],
[-9.0, 8.6]
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
You can render triangles by using Highcharts.SVGRenderer.
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
But I think the easiest option will be using a scatter series with triangle markers to achive this. Check the following config and demo:
{
type: 'scatter',
showInLegend: false,
enableMouseTracking: false,
marker: {
symbol: 'triangle-down',
fillColor: 'rgb(124, 181, 236)',
radius: 9
},
states: {
inactive: {
opacity: 1,
},
},
data: [{
x: 9,
y: -1.3
},
{
x: 10,
y: -8.7
},
{
x: 11,
y: -9.0
}
]
}
Demo:
https://jsfiddle.net/BlackLabel/3rokf4aw/
I have Highchart with series data and I want to hide() one data element, works correctly when I hide() the first element, but when I try to hide() second or any other element only data point is hidden, and the label xAxis does not disappear :(
Guys, could you explain to me why is this happening and how I can hide the entire element with highcharts-axis-labels?
Many thanks!
My jsfiddle code here
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
name: 'Xalkori',
data: [{
x: 44,
y: 1435
}, {
x: 44,
y: 689
}]
}, {
name: 'Xofigo',
data: [{
x: 45,
y: 14182
}, {
x: 45,
y: 514
}],
visible: false,
}, {
name: 'Xtandi',
data: [{
x: 46,
y: 9065
}, {
x: 46,
y: 572
}]
}, {
name: 'Yervoy',
data: [{
x: 47,
y: 42646
}, {
x: 47,
y: 1395
}]
}]
});
Notice that the amount of the xAxis labels, their visibility etc are independent on the chart point visibility.
Demo: https://jsfiddle.net/BlackLabel/7e90jwdL/
If you want to hide the xAxis labels base on the series visibility, you will need to do it programmatically.
Something like here:
events: {
render() {
let chart = this;
chart.series.forEach(s => {
if (!s.visible) {
chart.xAxis[0].ticks[s.xData[0]].label.hide()
} else {
chart.xAxis[0].ticks[s.xData[0]].label.show()
}
})
}
}
Be aware that this demo is just a showcase and it works fine if the series points x values are the same.
Demo: https://jsfiddle.net/BlackLabel/qn0tsdeh/
API: https://api.highcharts.com/highcharts/chart.events.render
I am using apex chart for modern and flexible charts. (https://apexcharts.com/).
Here is my code snippet:
var options = {
chart: {
height: 15,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
As you can see the height of the chart is a no go. Its cause by the small numbers. When I would have data over 100 it works, but with small numbers, I have this problem. Any solutions to fix this?
~filip
try increasing chart.height to 200.
this allows the chart to be visible.
see following working snippet...
var options = {
chart: {
height: 200,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
series: [{
name: "Desktops",
data: [10, 5, 2, 15, 12, 11, 10, 1, 0]
}],
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(
document.getElementById("chart"),
options
);
chart.render();
<div id="chart">
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
I have a Highchart which renders a line series as shown in the snippet below:
Highcharts.chart('container', {
title: {
text: 'The graphs connect from April to June, despite the null value in May'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
connectNulls: true
}
},
series: [{
data: [
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40],
type: 'line',
name: 'Area range series',
marker: {
enabled: false
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
I know that Highchart has a property connectNulls to connect null values. But I want to connect only when value is Null and not NaN.
NaN is not a correct point format, just like String or Boolean. If value is not a number then it's treated as null-point. I think you want to use opposite options: connectNulls to false and just remove null points, with given indexes, demo: http://jsfiddle.net/BlackLabel/fquznbeq/4/
You can automate this process: http://jsfiddle.net/BlackLabel/fquznbeq/8/
function toHCFormat(data) {
var formatted = [];
data.forEach(function (point, i) {
if (point === null) {
// do nothing
} else if (isNaN(point)) {
formatted.push([i, null]);
} else {
formatted.push([i, point]);
}
});
return formatted;
}
Use:
data: toHCFormat([
20,
60,
null,
11,
null,
160,
120,
130,
NaN,
NaN,
80,
40
]),
I'm building a stacked column chart using highcharts which shows data by month over a 24 month period which will often go over three years.
My current code is as follows:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr', 'Mar', 'Feb', 'Jan', 'Dec', 'Nov', 'Oct', 'Sep', 'Aug', 'Jul', 'Jun', 'May', 'Apr']
},
yAxis: {
min: 0,
title: {
text: 'Total investments'
},
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Bad',
data: [90000, 100000, 110000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}, {
name: 'OK',
data: [0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0, 0, 0, 100000, 0, 0, 0, 0]
}, {
name: 'Good',
data: [250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000, 250000, 290000, 210000, 300000, 320000, 190000, 200000, 210000, 210000, 210000]
}]
});
});
JSFiddle of my current set up is here and hoping someone can how I'd be able to wrap each group of months in their relevant year as shown in this image:
You can use extension, which allows to group categories.
http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories