Related
I have highchart series with time, I try to configure as below
http://jsfiddle.net/viethien/3eofd1nk/33/
$(function () {
$('#container').highcharts({
global: {
useUTC: false
},
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
type: 'datetime',
labels : {
formatter: function() {
var myDate = new Date(this.value);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
style:{
fontFamily:'VegurRegular'
}
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
formatter: function() {
var myDate = new Date(this.x);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);
},
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: [{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}]
}]
});
});
I read other article and suggest set utc false but not work.
HighChart- When I use useUTC: false then x axis data are not showing properly
Could you help me this issue?
You can just use tickPositioner function and generate ticks in the same positions as points.
tickPositioner: function() {
return this.series[0].xData;
}
Live demo: http://jsfiddle.net/BlackLabel/43bugf76/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
Highchart is doing everything right. Once you remove the formatter from both the XAxis Label and Tooltip, you will see that the Timestamps from your dataset are not actually from 00:00 clock.
I see two ways around this, either convert the x UNIX Timestamp from your dataset to display the date only, or change your Highchart configuration to use the display from your dataset as the XAxis.
The code example below includes the function shiftTimeInData to convert the dataset and to align the x with your display.
I also modified your formatter.
function shiftTimeInData(data){
$(data).each(function(){
let d = new Date(this.x);
this.x = Date.UTC(d.getFullYear(),d.getMonth(),d.getDate()+1);
});
return data;
}
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
type:'area',
plotBackgroundColor: '#fff',
backgroundColor:'transparent',
},
credits: {
enabled: false
},
title: {
text: 'X Axis and value not match',
align: 'left',
margin: 30,
style:{
fontFamily:'VegurRegular',
fontSize:'21px'
}
},
subtitle: {
text:'Date Time',
align: 'left',
x: 20,
style: {
color: '#282828',
fontFamily:'VegurRegular'
}
},
xAxis: {
title: {
text: ''
},
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
type: 'datetime',
labels : {
style:{
fontFamily:'VegurRegular'
},
align:'left'
}
},
yAxis: {
opposite:true,
title: {
text: ''
},
labels: {
formatter: function() {
return [this.value];
},
style:{
fontFamily:'VegurRegular'
}
},
},
tooltip: {
shared: true,
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, '#5cc2d6'],
[1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: shiftTimeInData([{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
{x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
{x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
{x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
{x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
{x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
{x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}])
}]
});
});
As you can see, the function shiftTimeInData is called right when adding the data it to the Highchart series.
I need to display my x-axis label as a whole number with percentage without the decimal and a zero before it. I am already using allowDecimals: false but that's not helping it looks like. How can I fix this?
0.10% should render as 10% and etc.
https://jsfiddle.net/samwhite/p01xvw2z/
Highcharts.chart('container', {
chart: {
height: 550
},
title: {
text: 'GME: Absolute Daily Return vs. % of Outstanding Shares Hedged, January 2021',
align: 'left',
style: {
fontSize: '20px',
fontWeight: 'bold',
}
},
subtitle: {
text: 'Data source: OPERA and Bloomberg',
align: 'left'
},
credits: { enabled: false },
xAxis: {
title: { text: '% of Outstanding Shares Needed for Hedging' },
// labels: {
// formatter: function () {
// return this.value.toFixed(2) + '%'
// }
// },
labels: {
format: '{value:,.2f}%'
},
min: -0.01,
max: 0.6,
tickInterval: 0.1,
allowDecimals: false
},
yAxis: {
title: { text: 'Absolute % Change in Price' },
min: -0.01,
tickInterval: 0.5,
labels: {
formatter: function () {
return this.value.toFixed(1)
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
enabled: false
},
series: [{
type: 'line',
name: '',
color: "#f79646",
data: [[0, -.1489], [0.5, 0.7003]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
}, {
type: 'scatter',
marker: {
symbol: 'circle',
fillColor: '#00429d',
radius: 3
},
name: 'Observations',
color: '#000',
data: [
[0.05, 0.08],
[0.05, 0.00],
[0.08, 0.05],
[0.08, 0.01],
[0.05, 0.02],
[0.13, 0.12],
[0.11, 0.00],
[0.35, 0.57],
[0.42, 0.27],
[0.38, 0.11],
[0.22, 0.10],
[0.21, 0.00],
[0.26, 0.09],
[0.48, 0.51],
[0.34, 0.18],
[0.44, 0.92],
[0.43, 1.34],
[0.34, 0.44],
[0.42, 0.67]
],
tooltip: {
valueDecimals: 2
}
}]
});
Something like this?
labels: {
formatter: function () {
return this.value * 100 + '%';
}
},
I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)
You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32
You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/
I want to access another series row data in series dataLabels. Here is my code.
categoriesarr = [1,2,3,4,5];
noofloandisbursed = [10, 20, 30, 40, 50];
pdo = [9, 18, 27, 40, 49];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'disbursement'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: categoriesarr
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 0,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#fff'),
shadow: true
},
series: [{
name: 'No. Of Loan Disbursed',
type: 'column',
data: noofloandisbursed
},
{
name: 'Pre-Disbursement Orientation',
type: 'column',
data: pdo,
dataLabels: {
enabled: true,
formatter: function(e) {
//return ((this.point.y/series[0].point.y)*100) + '%';
}
}
}]
});
I want to show the result of (series 2 value / series 1 value) * 100 in the dataLabels concatenation with % only in second series. Unfortunately i can't access the series 1's y point values. When i tried series[0].yData, it returns the whole array, not the specific row matched with second row. I also tried to pass array, but it wasn't working. Need solution of this problem.
You can find the point from the first series by index:
series: [{
...
},
{
...,
dataLabels: {
enabled: true,
formatter: function(e) {
return (
(this.point.y /
this.series.chart.series[0].points[this.point.index].y) *
100) + '%';
}
}
}
]
Live demo: http://jsfiddle.net/BlackLabel/rdwxc382/
API Reference: https://api.highcharts.com/highcharts/series.column.dataLabels.formatter
I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO
The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.