Develop Reference

Highchart - Column range as arrows

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/

Get correct sizing for apex line chart

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>

How to set 30 seconds interval for datetime on y-axis for highcharts JS

I have a graph, the y-axis on the graph must show minutes broken down by 30 seconds. I should display the y-axis as 2:00, 2:30 ... 5:30. The data I'm receiving from service is in seconds.
I would like to add time on the y-axis and point the graph according to the data.
I found an example, which has hours and minutes, however I'm unable to change to minutes and second with my desired values
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec']
},
yAxis: {
title: {
text: 'Time (hh:mm)'
},
labels: {
formatter: function () {
var time = this.value;
var hours1=parseInt(time/3600000);
var mins1=parseInt((parseInt(time%3600000))/60000);
return hours1 + ':' + mins1;
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [0, 0, 0, 0, 76320000, 25920000, 102840000, 0, 0, 0, 0, 0]
}]
});
});
Example
I want the y axis to look as the below picture

Ran the example with some simple data so that you can see the results being reflected... The key was to use the tickInterval... after that, we just had to format the time to look like time (with a colon), instead of large numbers depicting seconds.
you can check the complete working snippet below:
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
]
},
yAxis: {
title: {
text: 'Time (hh:mm:ss)'
},
tickInterval: 30,
labels: {
formatter: function() {
var time = this.value;
var mins = parseInt(time / 60);
var secs = time % 60;
if (secs == 0) {
return mins + ':00';
} else {
return mins + ':' + secs;
}
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [30, 60, 120, 45, 240, 360, 280, 45, 90, 180, 270, 0]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Highcharts time series combo graph where few months data is null

I am trying to develop a multi axis combo graph using highcharts api with months in x-axis and multiple y axis with 2 axes having percentages and 1 having number. This is similar to what you see in this link. This works fine when you have the y axes data for all 12 months. In some cases y axes data for few months are missing. In that case I still want to show the month in the x axis with no data. Currently if I have y axes data for only 2 months (say June and December), it would show as the data for Jan and Feb instead. Please find the code which I'm using and let me know what can be the resolution for this.
var chartMonthlyData = {
title: {
text: ''
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{
min: 0,
max: 50,
labels: {
format: '{value} %'
},
title: {
enabled: false
},
opposite: true
}, {
title: {
text: '',
},
labels: {
formatter: function () {
return this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
}, {
min: 0,
max: 50,
title: {
enabled : false
},
labels: {
enabled: false
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'right',
x: -30,
verticalAlign: 'top',
y: -5,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
color: '#C8102E',
name: 'Delivered',
type: 'column',
yAxis: 1,
data: deliveredMonthly,
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>'
+ '{point.y}' +'</b><br/>'
}
}, {
color: '#AAAAAA',
name: 'Open Rate',
type: 'line',
yAxis: 2,
data: openRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}, {
color: '#5891c8',
name: 'Clickthrough Rate',
type: 'line',
data: clickThroughRateMonthly,
lineWidth: 4,
marker: {
enabled: true,
"symbol": "circle"
},
tooltip: {
valueSuffix: ' %'
}
}]
}
In this image, actual months in x axis are January, June and August. I need the 12 months to be shown in the graph with the y axes data properly tied with months.

Get proper data from server side or update the data before providing to highcharts
data: [49.9, 71.5, 106.4, null, null, null, null, null,null, null, null, null],
add or substitute null to data series with no values corresponding to month in order to have series length same as categories
Fiddle demo

Simply add max parameter inside xAxis object.
API Reference:
http://api.highcharts.com/highcharts/xAxis.max
Example:
http://jsfiddle.net/xkqn4qq7/

There are multiple ways to format your data such that the gaps show up. You can use a 2 dimensional array:
var deliveredMonthly =[[0,4],[5,5],[7,2]],
You can use an array of objects, setting the x & y:
openRateMonthly = [{x:0,y:22},{x:5,y:5},{x:7,y:3}],
And, you can populate a one dimensional array with nulls for your missing data points.
clickThroughRateMonthly = [10,null,null,null,null,12,null,null,50];
In order to guarantee you have all 12 months, you should set the min and max on the xAxis
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
crosshair: true,
min:0,
max:11
}],
http://jsfiddle.net/v159gw36/2/

Highcharts won't draw line when series values are all 0

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.