Develop Reference

Highchart Line chart – data series with multiple axis - 2nd series placed in the middle of X axis

I would like to place 2nd series of data in the middle of the X axis (inverted line chart).
Here is the fiddle and this is the result I would like to get:
https://jsfiddle.net/r03bvcj1/
https://i.imgur.com/Irqt4hi.png
I’ve managed to get it working partially for Y axis.However Impact Tolerance line has disappeared for some reason and I would like to have it against X axis.
https://jsfiddle.net/r03bvcj1/2/
Any help/pointers will be much appraciated.
var chart;
chart= Highcharts.chart('div-impactTolerance', {
chart: {
type: 'line',
inverted: true,
events: {
load: function() {
var check = $('#div-impactTolerance').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
tooltip: {
formatter: function () {
var formatter = this.y >1 ? ' days':' day';
var header ='<span style="font-size: 10px">' + this.key + '</span><br/>';
var point = this.series.name + ': <b>' + this.y + formatter + '</b><br/>';
return header + point;
}
},
credits: {
enabled: false
},
title: {
text: 'Impact Tolerance'
},
xAxis: [{
title: {
text: "Severity"
},
gridLineWidth: 1,
categories: ['Very High','High','Medium','Low']
},
{
visible: true,
title: {
text: "T"
},
gridLineWidth: 1,
categories: [1,2,3,4],
opposite: true
},
],
yAxis: {
tickInterval: 1,
allowDecimals:false,
title: {
text: "Time (days)"
},
min: 0,
gridLineWidth: 0,
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 6,
dashStyle: 'longdashdot',
label: {
text: 'Impact Tolerance ' ,
verticalAlign: 'middle',
textAlign: 'center',
x: -15
},
}]
},
series: [
{
name: 'Scenario Testing',
states: {
hover: {
enabled: false
}
},
data: [5,7,9,11,12,14,17,18],
xAxis: 1,
lineWidth: 0,
showInLegend: true,
marker: {
radius: 10
},
threshold: 6,
negativeColor: 'green',
color: 'red',
tooltip: {
valueDecimals: 2
}
},
{
name: 'Outage Duration',
states: {
hover: {
enabled: false
}
},
data: [1,2,3,4],
xAxis: 0,
lineWidth: 0,
showInLegend: true,
marker: {
radius: 10
},
threshold: 6,
negativeColor: 'green',
color: 'red',
tooltip: {
valueDecimals: 2
}
}
]
});

Currently there are two categories on the right on one category on the left. You should adjust your data in such a way that the x value does not exceed the number of categories:
xAxis: [{
...,
categories: ['Very High', 'High', 'Medium', 'Low']
},
{
...,
categories: [1, 2, 3, 4]
},
],
...,
series: [{
...,
data: [
[0, 5],
[0, 7],
[1, 9],
[1, 11],
[2, 12],
[2, 14],
[3, 17],
[3, 18]
]
},
{
...,
data: [1, 2, 3, 4]
}
]
Live demo: https://jsfiddle.net/BlackLabel/Lhpt2zdb/
Docs: https://www.highcharts.com/docs/chart-concepts/axes

I want to develop a Spider web graph/Radar graph using Highchart

I would like to develop a Spider Web Radar which looks similar to the graph shown in image below using highcharts. can you please tell me wether this could be achieved using High charts. please check the below code and image attached
This is my approach Fiddle.
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
},
legend: {
enabled: false
},
title: {
text: 'Budget vs spending',
x: -90
},
pane: {
size: '90%'
},
xAxis: {
categories: ['Bonds', 'Future', 'Past', 'Value', 'Health', 'Divedend'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels:
{
enabled: false
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
series: [{
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, '#50e3c2'],
[1, '#50e3c2']
]
},
marker: {
enabled: false,
states: {
hover: {
radius: 8,
symbol: 'square',
}
}
},
name: 'Allocated Budget',
data: [80, 70, 60, 70, 70, 60],
pointPlacement: 'on',
shadow: {
color: '#000000',
width: 7,
opacity: 0.08,
offsetY: 3,
offsetX: 0
},
}]
});

Combination of Scatter HighChart with Polynomial Chart

I am trying a chart that combines two chart types in a one single-chart (spline & polynomial). When I merge both of them the chart stops working. If I them separately they work. Can I merge both chart in one using highchart?
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Polynomial regression - with extrapolation and different style'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
tooltip: {
pointFormatter: pointFormatter
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
},
{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, .9)',
dashStyle: 'dash'
},
name: 'Test input',
color: 'rgba(223, 83, 83, .5)',
data: [
[1, 1],
[2, 3],
[3, 9],
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8">
</script>
Highcharts Regression
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

That's a reported bug. Anyway while using a transparent color for the spline it works :
series: [{
regression: true,
regressionSettings: {
type: 'polynomial',
color: 'rgba(223, 183, 83, 0)', // transparent color
dashStyle: 'dash'
},
name: 'SplineChart',
type: 'spline',
marker: {
enabled: true
},
data: [
[1, 2],
[1, 6],
[3, 9],
]
}
Updated Fiddle

how to show Y axis (not it label) in jquery?

I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});

This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},

Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},

You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>

Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y

I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]

1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.