We Keep Coding

Failing to display more ticks in the Highcharts histogram

I am trying to display more ticks in my histogram. To be more specific, I would want the first tick to be -0.5 and other ticks be spaced 0.05 from each other (-0.5, -0.45, -0.4 ...) so that the last tick is 0.5. Could someone help me with implementing this to my code?
var data = [];
for (var i = 0; i < 1000; i++) {
data.push(Math.random() - 0.49);
}
Highcharts.chart('container', {
title: {
text: 'Return distribution'
},
legend: {
enabled: false
},
xAxis: [
{
title: {
text: 'Asset 1'
},
alignTicks: false,
visible: false
},
{
title: {
text: 'Portfolio returns'
},
alignTicks: false,
opposite: false
}
],
yAxis: [{
title: {
text: 'Asset 2'
},
visible: false
},
{
title: {
text: 'Frequency'
},
opposite: false
}
],
plotOptions: {
histogram: {
// binsWidth: '', takes precende over binsNumber
binsNumber: 20
}
},
series: [{
name: '',
type: 'histogram',
visible: true,
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1,
color: ''
}, {
name: '',
type: 'scatter',
data: data,
id: 's1',
visible: false,
marker: {
radius: 1.5
}
}]
});
If I insert
min: -0.5,
max: 0.5,
tickInterval: 0.05
to the xAxis config. the script won't work
Link to jsfiddle: http://jsfiddle.net/lauri1/5wgfoebs/60/

To show first and last ticks you can set xAxis options startOnTick and endOnTick.
xAxis: [{
startOnTick: true,
endOnTick: true
}
]
In that case, setting xAxis.tickInterval to 0.05 it's working as you wished.
DEMO: http://jsfiddle.net/BlackLabel/y79mor0q/

high charts starting new line from each point

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/

Ugly Highchart when using letter label for both xaxis and yaxis

I am trying to make the chart with both text label on xAxis and yAxis like this
Example
I am able to make it by this configuration
$(function() {
var chart = Highcharts.chart('chart-container', {
chart: {
type: 'bar',
},
title: {
text: '',
floating: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.2f}</b><br/>'
},
xAxis: {
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
gridLineWidth: 1,
tickLength: 0,
labels: {
align: 'left',
reserveSpace: true
},
categories: ['1. - 4. trinn (frivillige øvelser)', '1. - 4. trinn (obligatorisk ferdighetsprøve)', '5. - 7. trinn (frivillige øvelser)', '8. - 10. trinn (frivillige øvelser)']
},
yAxis: {
min: 31.83333,
max: 100,
title: {
text: null
},
gridLineWidth: 1,
tickLength: 0,
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
categories: {
'33.33333': 'Må øve mer',
'66.66667': 'På god vei',
'100': 'Kan'
},
tickPositions: [0, 33.33333, 66.66667, 100],
plotBands: [{
from: 31.83333,
to: 33.33333,
color: '#CC3333'
}, {
from: 65.16667,
to: 66.66667,
color: '#F2BA38'
}, {
from: 33.33333,
to: 34.83333,
color: '#CC3333'
}, {
from: 66.66667,
to: 68.16667,
color: '#F2BA38'
}, {
from: 97,
to: 100,
color: '#77B800'
}]
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0
}
},
series: [{
name: '',
color: '#646464',
borderColor: '#464646',
borderWidth: 1,
data: [0, 66.6666666666667, 0, 0]
}]
})
});
https://jsfiddle.net/ngoclamnn/nu2fwzrn/
But you can see that it has a little bit "weird" at the 0 values, maybe it is a bug on Highchart?
Do you have another way to solve this?

Using this answer I was able to find a solution. Create yAxis categories as a variable and use the same function the answer uses to insert them, that is:
var categories = {0: '', 33.33333: 'Må øve mer', 66.66667: 'På god vei', 100: 'Kan'}
And then in the chart:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
...
}
Working example: https://jsfiddle.net/nu2fwzrn/73/
Make sure to upvote the original answer.

How can I align the scale on my HighCharts graph with the axis rather than the margins?

By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively, as you can see here: http://jsfiddle.net/z7eyv/60/
I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},

As I have mentioned in my comments, you can use 'crossing-specific-values' plugin, available in Highcharts plugin repository:
https://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
You should be able to use labels.y option for moving your labels up/down
http://api.highcharts.com/highcharts/yAxis.labels.y
You should also be able to disable 0 values from your labels using labels.formatter:
http://api.highcharts.com/highcharts/yAxis.labels.formatter
yAxis: {
min: -20,
max: 20,
crossing: 0,
labels: {
formatter: function() {
return this.value ? this.value : ''
}
},
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'
}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
crossing: 0,
opposite: true,
visible: true,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
labels: {
y: 13,
formatter: function() {
return this.value ? this.value : ''
}
},
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'
}]
},
Example:
http://jsfiddle.net/z7eyv/71/

Not able to correctly plot x-axis in HighChart

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.