I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time.
Please go through the code below.
HTML Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Javascript Code
var maxval="94";
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
type: 'column',
renderTo: 'container',
},
title: {
text: 'Weekly Traffic'
},
xAxis: {
type: 'datetime',
labels: {
format: '{value:%d-%b-%Y}',
rotation:-45,
},
},
yAxis: {
labels:{enabled: false},
title: {
text: ''
},
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+': '+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br>'+ Highcharts.numberFormat((this.y /maxval ) * 100) + '%';
}
},
plotOptions: {
line: {
enableMouseTracking: false
},
series:{
pointStart: 1444242600000,
pointInterval: 86400000,
shadow:false,
dataLabels:{
enabled:true,
formatter:function()
{
var pcnt = (this.y /maxval ) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
series: [{
name: 'Firefox',
data: [10,56,32,12,64,13,38],
},{
name: 'Chrome',
data: [52,59,10,60,94,3,8],
},{
name: 'Edge',
data: [22,56,20,35,14,73,38],
},{
name: 'Opera',
data: [30,36,80,65,44,53,81],
},{
name: 'Safari',
data: [40,16,50,77,34,33,36],
}],
});
});
});
The working fiddle is given
here.
you need to set utc false in global option of highcharts.
Highcharts.setOptions({
global: {
useUTC: false
}
});
see Updated fiddle here
Related
I am trying to visualise more than 400 data points using highcharts timeline, but I'm getting Cannot read property 'isValid' of undefined
Fiddle: https://jsfiddle.net/0fv2kxqb/
const test = [];
for (let i = 0; i < 400; i++) {
test.push({
x: Date.UTC(1900 + i, 9, 4),
name: 'test'
});
}
Highcharts.chart('container', {
chart: {
zoomType: 'x',
type: 'timeline'
},
xAxis: {
type: 'datetime',
visible: false
},
yAxis: {
gridLineWidth: 1,
title: null,
labels: {
enabled: false
}
},
legend: {
enabled: false
},
title: {
text: 'Timeline of Space Exploration'
},
subtitle: {
text: 'Info source: www.wikipedia.org'
},
tooltip: {
style: {
width: 300
}
},
series: [{
dataLabels: {
allowOverlap: false,
format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
'{point.x:%d %b %Y}</span><br/>{point.label}'
},
marker: {
symbol: 'circle'
},
data: test
}]
});
#container {
min-width: 400px;
max-width: 600px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<div id="container"></div>
It works fine with ~300 data points
Does it not work with large amounts of data points?
That problem is a bug and it is reported here: https://github.com/highcharts/highcharts/issues/11116
Possible workarounds:
set cropThreshold bigger than data length: https://jsfiddle.net/BlackLabel/rtkj5xd7/
enable getExtremesFromAll: https://jsfiddle.net/BlackLabel/rtkj5xd7/2/
I want to customize non stacked column labels on highchats .
Instead of this
I want to show the labels like this
What i already tried is make another series that shows the percentage.but it's not showing like the expected results.
Is it possible to do in Highcharts ?
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Show Percentage'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Jan',
'Feb'
],
crosshair: true
},
yAxis: {
min: 0,
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
},
series : {
dataLabels : {
enabled :true
}
}
},
series: [
{
name: 'A',
data: [100, 80]
}, {
name: 'B',
data: [50, 40]
}]
});
</script>
You can enable the dataLabels only for the first series and use the render event to position the labels correctly:
chart: {
type: 'column',
events: {
render: function() {
var points = this.series[0].points,
shapeArgs,
y;
points.forEach(function(point, i) {
shapeArgs = point.shapeArgs;
if (point.y > this.series[1].points[i].y) {
y = shapeArgs.y;
} else {
y = this.series[1].points[i].shapeArgs.y;
}
y -= point.dataLabel.height;
point.dataLabel.attr({
x: shapeArgs.x + shapeArgs.width - point.dataLabel.width / 2,
y: y
});
}, this);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/rqp5nb0a/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render
I am creating a pie chart in Highcharts with a legend. When I specify the series as an array of values (my preferred method), the legend displays the string "Slice" for each value. If I instead specify the series as a list of objects with named values, I correctly see the data names. Can I see the data names if I specify the series as an array of values?
Here is the code that doesn't work but that I would like to use:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
xAxis: {
categories: ["BADHAM, J", "COPPOLA, F", "GUILERMAN, J", "HILLER, A",
"SPIELBERG, S"],
},
series: [{
name: 'Directors',
data: [74100000, 30673000, 36915000, 50000000, 90434000],
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
Here is the code that does work when I specify the series as a list of objects with named values:
<html>
<head>
<title>HighCharts pie</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
$(function () {
$('#container').highcharts({
chart: {
type: 'pie',
height: '500',
width: '750',
borderColor: '#EBBA95',
borderWidth: 2
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
format: '{point.y:,.0f}'
}
}
},
title: {
text: 'Rental Amounts for Paramount Directors'
},
legend: {
enabled: true
},
series: [{
name: "Directors",
slicedOffset: 20,
data: [{
name: "BADHAM, J",
y: 74100000
}, {
name: "COPPOLA, F",
y: 30673000
}, {
name: "GUILERMAN, J",
y: 36915000
}, {
name: "HILLER, A",
y: 50000000
}, {
name: "SPIELBERG, S",
y: 90434000
}]
}]
});
});
</script>
</head>
<body>
<div id="container" style="width:600px; height:400px;"></div>
</body>
</html>
You can do this with tooltip.formatter and legend.labelFormatter and accessing the highchart options.
For the tooltip text:
tooltip: {
formatter: function() {
var sliceIndex = this.point.index;
var sliceName = this.series.chart.axes[0].categories[sliceIndex];
return 'The value for <b>' + sliceName +
'</b> is <b>' + this.y + '</b>';
}
},
And for the legend:
legend: {
enabled: true,
labelFormatter: function() {
var legendIndex = this.index;
var legendName = this.series.chart.axes[0].categories[legendIndex];
return legendName;
}
},
Live demo.
as of 5 years later, do this:
legend: {
enabled: true,
labelFormatter: function() {
let legendName = this.series.chart.axes[0].categories[this.x];
return legendName;}}
I have the following High Chart of type Bar. I did some online search on how to hide the grid lines , I was able to hide grid lines except first line. can anybody suggest me where i am the doing the mistake.
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
width:300,
height: 100,
type: 'bar'
},
title: {
text: ''
},
title: {
text: ''
},
xAxis: {
categories: ['Wind', 'Flood', 'EQ'],
tickWidth: 0,
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ''
},
gridLineColor: 'transparent',
minorGridLineWidth: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
}, legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
labels:
{
enabled: false
},
exporting: { enabled: false },
plotOptions: {
series: {
borderWidth: 0,
minPointLength:10 ,
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [10],
color: '#9CC7DC'
}, {
name: 'Jane',
data: [21],
color: '#72AFCD'
}, {
name: 'Joe',
data: [31],
color: '#1479ac'
}]
});
)};
You need to disable axis line by setting lineWidth parameter as 0.
I am using Highcharts to show temperatures from DHT22. Measurement occures every 5 min, but on the chart I can see tooltip only for first point.
Script weather.php returns JSON-array
What is wrong?
Code:
<html>
<head>
<title>Weather</title>
<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/highcharts.js"></script>
<script>
var chart;
function requestData()
{
$.ajax({
url: 'weather.php',
datatype: "json",
success: function(data)
{
chart.series[0].setData(data.temperature);
chart.series[1].setData(data.humidity);
},
});
}
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: true
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Monitoring'
},
tooltip: {
shared: true
},
xAxis: {
type: 'datetime',
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Temperature/Humidity',
margin: 80
}
},
series: [{
name: 'Temperature',
data: []
},
{
name: 'Humidity',
data: []
}]
});
});
</script>
</head>
<body>
<div id="graph" style="width:100%; height:400px;"></div>
</body>