Develop Reference

Highcharts Display Xaxis plot line

How can I enable only the left most Highcharts XAxis plot line on DateTime Line chart. I suppose there should be a default option to display XAxis line without needing to know the minimum/start value
My progress so far -> https://jsfiddle.net/Lpjb9wc7/
const chart = Highcharts.chart('container', {
credits: {
enabled: false,
},
title: null,
xAxis: {
title: 'Session',
type: 'datetime',
tickInterval: 3600 * 1000,
gridLineWidth: 1
},
yAxis: {
gridLineWidth: 0,
title: {
text: 'Temperature',
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
},
series: [
{
data: [
[1369206795000, 1],
[1369225421000, 3],
[1369230934000, 2],
],
},
],
});

You need to change the dafault value of the lineWidth property.
yAxis: {
lineWidth: 1,
...
}
Live demo: https://jsfiddle.net/BlackLabel/49078gLx/
API Reference: https://api.highcharts.com/highcharts/yAxis.lineWidth

Set minPointLength for one of two series in highchart

I have two series of data in my highchart and want to use "minPointLength" for only one of them. Is this possible to set? My series contains only: name, color and data. My chartconfig looks like this:
const chartConfig = {
chart: {
type: 'column',
dashStyle: 'ShortDash',
},
title: {
text: '',
},
xAxis: {
padding: 0,
plotLines: [{
dashStyle: 'shortDash',
}],
},
yAxis: {
opposite: true,
title: {
text: '',
},
gridLineDashStyle: 'dash',
},
plotOptions: {
column: {
borderRadiusTopLeft: 32,
borderRadiusTopRight: 32,
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
},
enableMouseTracking: false,
},
series: {
pointWidth: 24,
minPointLength: 3,
},
},
};
What I want is to always show minimum height on one of the datasets. Even if the scale goes from 1 to 1 000 000, it supposed to be a little peak at the bottom if one of my columns shows 3 out of 1 000 000.

Yes, you can set a minPointLength property individually for each series:
series: [{
minPointLength: 80,
data: [...]
}, {
data: [...]
}]
Live demo: http://jsfiddle.net/BlackLabel/19nc8jv6/
API Reference: https://api.highcharts.com/highcharts/series.column.minPointLength

HighCharts dual x-axis with percent and date

I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.

You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks

Align label and the marker on the same vertical line(Highcharts)

I want to add a dash like in the red circle from the first point(blue). Is it possible?
Here is my code
function graph(graph_id, value_array,tool_tip_title, max, min){
$('#'+graph_id).highcharts({
chart: {
type: 'areaspline',
backgroundColor:'transparent'
},
title: {
text: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("HH:mm:ss");
}
}
},
yAxis: {
title: {
text: false
},
gridLineColor: 'transparent',
labels:{enabled: true},
gridLineWidth: 0,
minorGridLineWidth: 0,
min: min,
max: max
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1
},
series: {
tooltip: {
dateTimeLabelFormats: {
second:"%A, %b %e, %H:%M:%S"
}
},
marker: {
fillColor: '#3D84B1',
lineWidth: 2,
lineColor: 'white',
radius: 6
}
}
},
series: [{
showInLegend: false,
name: tool_tip_title,
color: "#EC615F",
data: value_array
}]
});
}
I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.

Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner. In your case, I think you can simply add two extra dates, like this:
tickPositioner: function() {
var tp = this.tickPositions; // get default positions
tp.splice(0, 1, this.min); // replace first label
tp.splice(tp.length - 1, 1, this.max); // replace last label
return tp;
}
Simple demo: http://jsfiddle.net/p98rggva/

you can use startOnTick and min as per your minimum data.
startOnTick: true,
min: your smallest data of xAxis/in date use first timestamp of sorted data

HighCharts not plotting decimal values in x-axis

I'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks

Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?

Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},