We Keep Coding

Highcharts - Xrange chart events issue

I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.

Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load

Get X Axis value on bar Highchart click event

Well, I have a bar Highchart showing some scores, what I want to get is the x Axis value (the user id) when I click a plot serie.
Making some research I was able to show the x Axis value when I click on the chart background (I am using console.log to show this data), but I a unable to do it clicking any plot serie (the coloured bar)
This is the snippet:
var cats=["1.- John :8","2.- Mark :7","3.- Mary :5","4.- Charles :2","5.- Sarah :1"];
var prcs=[2,12,13,11,15];
Highcharts.chart('container', {
chart: {
type: 'bar',
events:{
click: function(te){
console.log(prcs[Math.round(te.xAxis[0].value)]);
}
}
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
categories: cats,
lineColor: '#FFFFFF',
tickColor: 'transparent',
labels: {
align: 'left',
x: 0,
y: -12,
style: {
textOverflow: 'none',
width:'300px',
whiteSpace:'normal'//set to normal
}
}
},
yAxis: {
min: 0,
title: {
text: null,
},
labels: {
enabled: false
}
},
legend: {
enabled: false
//reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
events:{
click: function(te){
console.log(this.name);
}
}
//pointPadding: 0,
//groupPadding: 0
},
bar:{
}
},
series: [{
name: 'High',
color: '#009900',
data: [0,1,0,1,0]
}, {
name: 'Mid',
color: '#FFCC66',
data: [4,3,0,1,1]
}, {
name: 'Low',
color: '#FF6666',
data: [4,4,5,1,0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 210px"></div>
The same in jsFiddle: http://jsfiddle.net/29vfsc4t/5/
If you click on the background you will get the user id, and clicking on any bar you will get the "score", what I need is to get the user id when I click on a bar.

You should be catching the point.event instead of the chart.event to get the point's xAxis category:
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
x: 0
},
point: {
events: {
click: function(te) {
console.log(this.category);
console.log(this.x);
}
}
}
},
bar: {}
},
Note the change to console.log(this.category) to show the xAxis name.

how to draw hour and minute value (hh:mm) pie chart using highcharts,javascript

how to draw hh:mm pie chart using highcharts for bellow table

You could try this approach, we get the total amount of time, then create a highcharts chart from the individual points:
const data = [
{
name: 'Line Clear - Line maintenance',
value: '06:29',
color: '#eef441'
},
{
name: 'Incoming Supply Failure (ICF)',
value: '14:44',
color: '#f44242'
},
{
name: '33 KV Line Breakdown',
value: '02:13',
color: '#41f48b'
},
{
name: 'Line Clear - SS maintenance',
value: '00:10',
color: '#4176f4'
},
{
name: 'Momentary Interruptions',
value: '01:11',
color: '#e541f4'
}
];
var totalTimeSeconds = data.reduce((sum,row) => {
return sum + 1.0*moment.duration(row.value).asSeconds();
}, 0.0);
var dataSeries = data.map((row) => {
return {
name: row.name + " (" + row.value +")",
y: moment.duration(row.value).asSeconds() / totalTimeSeconds,
color: row.color
};
});
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Reason Type'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Reason',
colorByPoint: true,
data: dataSeries
}]
});
Here's a JSFiddle that demonstrates this: Reason-Chart

*Actually i'am generating pie chart for table using table id.
So i added another column as seconds,generated table like bellow image.
The bellow Script is used to generate pie chart
<div class="row" style="margin-left: 0px;text-align: center;">
<div id="durationGraphcontainer" style="height: 310px; margin: 0 auto;margin-bottom: 10px;width: 100%"></div>
</div>
// Duration Graph
Highcharts.chart('durationGraphcontainer', {
data: {
table: 'durationGraph'
},
chart: {
type: 'pie'
},
title: {
text : 'Inetrruption Reason Type Graph'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Million Units'
},
stackLabels: {
enabled: true,
align: 'center'
}
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left',
layout: 'vertical',
y: 100,
labelFormatter: function() {
return this.name + " - " + this.percentage.toFixed(2) + "%";
}
},
tooltip: {
pointFormat: '<b>{point.percentage:.2f}%</b>',
formatter: function () {
return this.point.name.toUpperCase();
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: false,
format: '{point.percentage:.2f} %',
} ,
innerSize: 100,
depth: 45,
showInLegend: true
},
},
series:[
{
type: 'pie',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return this.point.y.toFixed(2);
}
}
},{point: {
events: {
click: function() {
}
}
}
}],
credits: {
enabled: false
}
});*

HighCharts error #18: Requested Axis Does not exist

I am new to HighCharts and I am trying to display 2 graphs on the same x-axis) axis like shown here: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/.
However, I get an error message: This error happens when you set a series' xAxis or yAxis property to point to an axis that does not exist.
The error occurs in "chart1"
The html and JAVASCRIPT code is as follows:
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[]
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
console.log(date);
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
console.log("day_final", day_final);
var chart = new Highcharts.chart({
chart: {
type: 'spline',
renderTo: 'light',
marginBottom: 200
},
title: {
text: 'indicatorName'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: 'Ambient Light Level'
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final //
}]
});
var chart1= Highcharts.chart('temp&humid',{
chart: {
zoomType:'xy'
},
title:{
text:'Humidity and temperature'
},
xAxis:{
categories: [1,2,3],
crosshair: true
},
yAxis: [{
labels:{
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title:{
text: 'Temperature',
style:{
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
},
{ //secondary Y AXIS
gridLineWidth: 0,
title:{
text: 'Humidity',
style:{
color: Highcharts.getOptions().colors[0]
}
},
labels:{
format: '{value}%',
style:{
color:Highcharts.getOptions().colors[0]
}
}
}]
,
tooltip:{shared:true},
legend:{
layout: 'vertical',
align:'left',
x:80,
verticalAlign: 'top',
y: 55,
floating:true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series:[{
name:'Humidity',
type: 'column',
yAxis:1,
data:[12,3],
tooltip:{valueSuffix: ' %'}
},
{
name:'Temperature',
type:'spline',
yAxis:2,
data: [1,2,3],
tooltip:{valueSuffix: ' °C'}
}]
});
}); //getJSON method
setTimeout(updat, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 400px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 400px; left:10px"></div>

You are doing the following:
series:[{
yAxis:1,
},
{
yAxis:2,
}]
You need to do:
series:[{
yAxis:0,
},
{
yAxis:1,
}]
The problem is that axes start indexing at 0. So your index where you set temperature to axis 2 does not work because there is no axis 2. In the demo there are 3 axes, which is why it works with these definitions.

How to create in a series multiple data each in a different yaxis using highcharts

I'm working on a project to register pump curves in a MySQL database. So I'm trying to create the closest possible one chart with 3 yAxis (H, NPSH, Power) and 2 xAxis (flow and efficiency). I uploaded a pump curve image here for better understanding. Note this efficiency is a logarithm scale but I prefer to create a linear scale to make it easy.
Well, every curve chart has more one rotor curve, in this case we have 5 curves which is five types of rotor (176mm, 169mm, 162mm, 154mm and 148mm).
Each rotor gives one data series in a yAxis as H, NPSH, Power and Efficiency.
So I need to create a series for each rotor size whem each series get the values ​​of the data: H,NPSH,Power,Efficiency with its yAxis referals.
Here is the link's page with the code.
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Curva da Bomba'
},
subtitle: {
text: 'KSB Meganorm 32-160 | Rotação 1750rpm'
},
xAxis: [{
tickmarkPlacement: 'on',
labels: {
format: '{value}m³/h',
style: {
color: '#005ca2'
}
},
title: {
text: 'Vazão Q (m³/h)',
style: {
color: '#005ca2'
}
}
},{// Rendimento
labels: {
format: '{value}%',
style: {
color: '#005ca2'
}
},
title: {
text: 'Rendimento n (%)',
style: {
color: '#005ca2'
}
},
opposite: true,
top: 90,
height: 0,
offset: 0,
lineWidth: 1
}],
yAxis: [{ // Altura manométrica H
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'Altura manométrica H (mca)',
style: {
color: '#005ca2'
}
},
top: 90,
height: 250,
offset: 0,
lineWidth: 1
}, { // NPSH
labels: {
format: '{value}mca',
style: {
color: '#005ca2'
}
},
title: {
text: 'NPSH (mca)',
style: {
color: '#005ca2'
}
},
top: 380,
height: 120,
offset: 0,
lineWidth: 1
}, {// Potência
title: {
text: 'Potência (hp)',
style: {
color: '#005ca2'
}
},
labels: {
format: '{value} hp',
style: {
color: '#005ca2'
}
},
top: 540,
height: 220,
offset: 0,
lineWidth: 1
}],
tooltip: {
crosshairs: true,
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
x: 0,
verticalAlign: 'top',
y: 34,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false
},
pointInterval: 1, // one hour
pointStart: 6
}
},
series: [{
name: 'Rendimento n (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [40,44,45.5,48,50,51.5,52.5,53,53.8,54.7,54.6,53.4,53.4,52.5],
dashStyle: 'shortdot',
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'NPSH (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 1,
data: [1.2,1.25,1.3,1.4,1.4,1.4,1.4,1.4,1.4,1.63,1.78,2.5,3.2,4],
tooltip: {
valueSuffix: 'mca'
}
}, {
name: 'Potência (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
yAxis: 2,
data: [0.8,0.87,0.92,0.96,1.01,1.04,1.08,1.13,1.15,1.19,1.22,1.24,1.26,1.29],
tooltip: {
valueSuffix: 'hp'
}
}]
});
});

You can set which yAxis a series is plotted against by using the yAxis: <index> value in the series setup. For example:
...
{
name: 'Pressão H (Rotor 176mm)',
color: '#FF0000',
type: 'spline',
data: [14.1,13.9,13.7,13.45,13.2,12.8,12.45,12.1,11.65,11.3,10.7,10.27,9.8,9.2],
tooltip: {
valueSuffix: 'mca'
},
yAxis: 1,
}
...
Here is a very quick example of it. You have 2 xAxis and 3 yAxis. No idea if this is how you want to display it but this shows you how to move the axis around.