We Keep Coding

How to make highchart span over whole x-axis?

I have code from this post, when I increase the number of years,
xAxis: {
....
min: 0,
max: 3, // This is dynamic
The chart gets limited only to 0,1 years. how can I make the chart spans end to end so that it looks like this
Edit: the problem is that x-axis "years invested" comes from a variable and the no. of years changes e.g. in this problem it is 3, so the chart needs to go expand all the way from 0 to 3 (left to right) on the x-axis as is in the screenshot, I used max to show 3 years on x-axis, and the 3 values I will plot on y-axis will come from variables as well, in this e.g. its '22286,12286,9286' i will have only these 3 values and the graph will start from 0. so I cannot put any other arbitrary value in the series
var chart = Highcharts.chart('container', {
colors: ['#762232', '#EFCA32', '#007788'],
title: {
text: '',
},
chart: {
type: 'area',
backgroundColor: null,
// spacingRight: 5,
spacingTop: 5,
spacingBottom: 5,
style: {
fontFamily: 'Arial, sans-serif',
},
plotBorderWidth: 1,
plotBorderColor: '#ccc',
},
xAxis: {
gridZIndex: 4,
gridLineWidth: 1,
tickInterval: 1,
tickWidth: 0,
alignTicks: true,
gridLineColor: '#762232',
minPadding: 0,
maxPadding: 0,
min: 0,
max: 3,
title: {
text: 'Years Invested',
},
labels: {
enabled: true,
},
},
yAxis: {
gridLineWidth: 0,
opposite: true,
title: {
text: 'Hypothetical Value',
},
showFirstLabel: false,
showLastLabel: false,
tickPositioner: function() {
var prevTickPos = this.tickPositions,
tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
series = this.chart.series;
series.forEach(function(s) {
tickPositions.push(s.processedYData[s.processedYData.length - 1]);
});
tickPositions.sort(function(a, b) {
return a - b;
});
return tickPositions;
},
labels: {
enabled: true,
align: "right",
reserveSpace: true,
},
},
tooltip: {
enabled: !1,
},
plotOptions: {
area: {
pointStart: 0,
stacking: false,
lineColor: '#762232',
lineWidth: 1,
fillOpacity: 1,
dataLabels: {
crop: !1,
color: '#762232',
align: 'right',
y: 5,
},
marker: {
enabled: !1,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: !1,
},
},
},
},
},
series: [{
data: []
}, {
data: []
}, {
data: []
}]
});
document.getElementById('chartInit').addEventListener('click', function() {
chart.update({
series: [{
data: [0, 22286]
}, {
data: [0, 12286]
}, {
data: [0, 9286]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<button id="chartInit">Init chart</button>
<div id="container"></div>

You need to define data in [x, y] format and use yearsInvested variable as a value of the second point.
const yearsInvested = 10;
chart.update({
series: [{
data: [
[0, 0],
[yearsInvested, 22286]
]
}, {
data: [
[0, 0],
[yearsInvested, 12286]
]
}, {
data: [
[0, 0],
[yearsInvested, 9286]
]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zun7cdge/
API Reference: https://api.highcharts.com/highcharts/series.area.data

Highcharts dashed line on x axis not going all the way across

I have this highchart's jsfiddle and I want the dashed line to go all the way across the graph from 0-10.I have tried this out on a different graph called scatter and it works I want it to work on the type column graph. How do I do this? Is there something in the highcharts api that I am missing?
https://jsfiddle.net/arielkotch/n9dk126y/1/
Highcharts.chart('container', {
chart: {
type: 'column',
renderTo:'#container'
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: 'John',
borderColor: '#0000FF',
color: '#FFFFFF',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
borderColor: '#0000FF',
color: '#0000FF',
data: [2, 2, 3, 2, 1]
},
{
//5-width
//height
data: [
[4, 10],
[0, 10]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
},
{
data: [
[0, 20]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
]
});

To create such type of lines, you should use yAxis.plotLines:
yAxis: {
...,
plotLines: [{
value: 10,
zIndex: 2,
width: 2,
dashStyle: "Dash",
color: 'black',
}]
}
Live demo: https://jsfiddle.net/BlackLabel/ujyrz4h1/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines

trying to draw dotted lines over the chart

Hey Guys I'm trying to draw dotted lines over my highcharts chart but when I try this the lines either push the chart out of position or skip over the chart and continue past it.I'm also trying to put labels on the top of each barchart too
here's my code
$(function () {
$('#container5').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
tooltip: { enabled: false },
exporting: {
enabled:false
},
credits: {
enabled: false
},
legend: {
enabled:false
},
xAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
categories: ['']
},
yAxis: {
labels:
{
enabled: false
},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
gridLineColor: 'transparent',
title: {
text: ''
},
min: 0,
title: {
text: ' '
},
},
plotOptions: {
column: {
stacking: 'normal',
animation: false
},
series: {
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: '10',
data: [10],
pointWidth: 50,
groupPadding: 0,
color: '#f7a35c'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#004A98'
}, {
name: '12',
data: [12],
pointWidth: 50,
groupPadding: 0,
color: '#509ADC'
}]
});
});
and
<div class="col-md-2" id="container5" style="width: 200px; height: 700px; margin:auto"></div>
It looks like
Picture one
but I want it to look like this
Picture two

You can use Renderer.path to add custom line in the chart.
chart.renderer.path(['M', 0, 0, 'L', 100, 100])
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();

Deffine your plot lines on YAxis like this. Demo
yAxis: {
title: {
...
},
plotLines: [{
value: minValue,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: maxValue,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}]
}
EDIT
In addition to, if you want to align the plotLines to the left you can try this:
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x*2,y + height,'L',0,y + width];
};
DEMO

Highcharts Pie Chart Specify Pie Slice Gradient Color

I have a Highcharts Pie Chart and I am using radial gradients.
Demo: http://jsfiddle.net/19vyugeL/1/
Issue: Apply specific gradient color to specific pie slice. For a normal color I use the color: on the data, but I dont know how to do that with the gradients.
Goal: I want the "Remaining" budget slice the color it currently is and all the "Spent" slices the other color (green).
$(function () {
// Create the chart
$('#container9').highcharts({
colors: [{
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, RemainingColor1],
[1, RemainingColor2]
]
}, {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, SpentColor1],
[1, SpentColor2]
]
}],
chart: {
type: 'pie',
marginTop: 50,
marginBottom: 5,
},
title: {
text: 'Total Budget - $440,000'
},
subtitle: {
text: 'Total Spent - $103,057'
},
plotOptions: {
series: {
borderWidth: 2
},
pie: {
allowPointSelect: true,
borderWidth: 3,
borderColor: 'black',
dataLabels: {
style: {
fontSize: 9,
},
distance: -1,
y: -10,
x: 10,
color: TextColor,
enabled: true,
inside: true,
verticalAlign: 'top',
format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
}
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% - ${point.spend} of Total'
},
series: [{
name: new Date().getFullYear() + " National Spend ",
data: [{
name: new Date().getFullYear() + " Remaining Budget",
y: 79,
spend: '336,943',
// color: RemainingColor1,
}, {
name: "Wave 2",
y: 23,
// color: SpentColor1,
spend: '97,693'
}, {
name: "Wave 3",
y: 3,
// color: SpentColor1,
spend: '5,364',
}]
}]
});
});

Define the array colors, and then you can access it when you assign the color:
$(function () {
colors = [{
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, RemainingColor1],
[1, RemainingColor2]
]
}, {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, SpentColor1],
[1, SpentColor2]
]
}];
// Create the chart
$('#container9').highcharts({
chart: {
type: 'pie',
marginTop: 50,
marginBottom: 5,
},
title: {
text: 'Total Budget - $440,000'
},
subtitle: {
text: 'Total Spent - $103,057'
},
plotOptions: {
series: {
borderWidth: 2
},
pie: {
allowPointSelect: true,
borderWidth: 3,
borderColor: 'black',
dataLabels: {
style: {
fontSize: 9,
},
distance: -1,
y: -10,
x: 10,
color: TextColor,
enabled: true,
inside: true,
verticalAlign: 'top',
format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
}
},
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% - ${point.spend} of Total'
},
series: [{
name: new Date().getFullYear() + " National Spend ",
data: [{
name: new Date().getFullYear() + " Remaining Budget",
y: 79,
spend: '336,943',
color: colors[0],
}, {
name: "Wave 2",
y: 23,
color: colors[1],
spend: '97,693'
}, {
name: "Wave 3",
y: 3,
color: colors[1],
spend: '5,364',
}]
}]
});
});
http://jsfiddle.net/19vyugeL/3/

How to hide intermediate values of solid gauge chart of highcharts?

I wanted to remove intermediate number that are appeared on solid gauge chart.
e.g. I want to hide 100 from chart given in link.
Solid gauge chart
Here is my code of chart.
function myfun(data) {
var gaugeOptions = {
chart: {
renderTo: 'mydiv',
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (window.Highcharts.theme && window.Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.0, '#DF5353'], // red
[0.5, '#DF5353'],
[0.51, '#DDDF0D'],
[0.79, '#DDDF0D'], // yellow
[0.8, '#55BF3B'],
[1, '#55BF3B'] // green
],
lineWidth: 0,
minTickInterval: 100,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -110
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#mydiv')
.highcharts(
window.Highcharts
.merge(
gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [totalHealthScore],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((window.Highcharts
.theme && window.Highcharts.theme.contrastTextColor) || 'black') +
'">{y}</span><br/>' + '<span style="font-size:12px;color:silver">Score</span></div>'
},
tooltip: {
valueSuffix: ' Score'
}
}]
}));
}
How do I hide values 2.5 and 100 from charts given in the link??

You can affect the position of the ticks using tickInterval and startOnTick, e.g.
yAxis: {
tickInterval:200,
startOnTick:true,
http://jsfiddle.net/DdAr6/
http://api.highcharts.com/highcharts#yAxis.tickInterval

The number of steps need to be defined for the y axis.
In the speedometer's code:
yAxis: {
min: 0,
max: 200,
labels: {step:2},
title: {
text: 'Speed'
}
}
In the tachometer's code:
yAxis: {
min: 0,
max: 5,
labels: {step:2},
title: {
text: 'RPM'
}
}
See http://jsfiddle.net/y62sj/ for the full code.