In highcharts when i have set endOnTick true on x axis in my chart, then the chart showing unspecified value in the end of x axis
Highcharts.chart('container', {
chart: {
type: "line",
plotBorderWidth: 1
},
title: {
text: 'endOnTick is true by default'
},
subtitle: {
text: 'yAxis is rounded up to next tick and stops at 250'
},
xAxis: {
linear: [0,1,2],
endOnTick: true
},
yAxis: {
//endOnTick: false
},
series: [{
data: [23,76,45]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
That is related to the maxPadding property, which is set to 0.01 by default.
xAxis: {
...,
maxPadding: 0,
endOnTick: true
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4762/
API Reference: https://api.highcharts.com/highcharts/xAxis.maxPadding
Related
I am looking for settings to change some of the frame-lines in the radar chart.
There are 3 types of lines I'd like to be customized:
The red triangle line outside.
The 3 blue lines from center to each corner.
The small green triangle.
I've searched a lot but totally had no clue. I have tried to change the lineWidth of the yAxis and it only changes the width of the upper vertical line.
Here below is the code. It uses the latest highcharts to render the chart, as of Sep 12 2021 when I'm writing this question, it's 9.2.2:
window.chart = Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
polar: true,
type: 'area'
},
title: {
text: "radar chart title",
margin:33,
useHTML:true
},
tooltip: {
pointFormat: '<span style="color:{series.color}"><b>{point.y:,.0f}</b>'
},
plotOptions: {
animation:true
},
xAxis: {
categories: ["a","b","c"],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 4,
min: 0,
max:100
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: "Haha",
animation:true,
data: [52,119, 12],
lineWidth:4
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>
Use plot lines for y-axis:
yAxis: {
...
plotLines: [{
color: 'red',
value: 100,
zIndex: 2
}]
}
Use gridLineColor for x-axis:
xAxis: {
...,
gridLineColor: 'blue'
}
Use gridLineColor for y-axis:
yAxis: {
gridLineColor: 'green',
...
}
Live demo: http://jsfiddle.net/BlackLabel/fm45ab3k/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
I'm using highcharts to chart a graph to monitor during the 24 hours when a printer is printing and when a printer is doing nothing.
I've accomplished it using the xrange type, and everything is ok.
The only issue i'm having is that graph is plotted in the middle of the graph and i'd like it to be drawed in the bottom. What should i check?
This is the code i use to create the graph
Highcharts.chart('chart', {
chart: {
type: 'xrange'
},
plotOptions: {
series: {
pointPlacement: 'on',
colors: ["#00e205"],
}
},
xAxis: {
type: 'datetime',
plotBands: bands,
startOnTick: false
},
yAxis: {
min: 0,
startOnTick: false,
categories: ['Stampa'],
labels: {
enabled: false
}
},
legend : {
enabled: false
},
tooltip: {
formatter: function() {
return "Inizio stampa: "+moment(this.x).format('H:mm:ss')+" <br />Fine stampa:"+moment(this.x2).format('H:mm:ss')
}
},
title: {
text: 'Plotter'
}
});
You can disable startOnTick property and set proper min value for yAxis:
yAxis: {
min: 0.45,
startOnTick: false
},
Live demo: http://jsfiddle.net/BlackLabel/o3kxbcum/
API Reference: https://api.highcharts.com/highcharts/yAxis.min
I was trying to implement progress-bar/status-bar in highchart, need to show 2 colors for the progress bar/status bar one background color and another color for status/progress, achieved using stacking bar in highchart but first rectangle in that
have white stroke color so it differentiating 2 rectangles but i need to show it as single rectangle instead of 2,Is there anyway to remove that white stroke color to show as single one.
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FFFFFF'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
</body>
</html>
I think that you should be able to use borderWidth parameter that is described in Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0
}
},
When you will use this parameter you will be able to eliminate white border from your columns. I have made an example how your chart will work using this option:
http://jsfiddle.net/rvj65mor/1/
I am using Highchart to create a chart. I am using xAxis type: 'datetime'
my first xAxis label is showing repeatedly. When i add tickInterval all graph ticks overlaps on one and another, So i used pointInterval instead. All graph options are working except first xAxis label which is showing repeatedly.
here is my options js:
$(function () {
$('#container').highcharts({
chart: { type: 'area'},
title: {text: null},
exporting: { enabled: false },
xAxis: {
type: 'datetime',
pointInterval: 24 * 3600 * 1000,
labels: {
padding: 0,
step: 1,
formatter : function() {
var dayStr = Highcharts.dateFormat('%a ',this.value);
return dayStr;
}
},
startOnTick: true,
endOnTick: false
},
yAxis: {
min: <?php echo $this_min;?>,
max: <?php echo $this_max;?>,
title: { text:'mmHg' }
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{showInLegend: false, name:'diastolic', data:[[1464998400, 130], [1465171200, 125], [1465344000, 120], [1465430400, 122]]}, {showInLegend: false, name:'systolic', data:[[1464998400, 90], [1465171200, 85], [1465344000, 80], [1465430400, 82]]}],
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="font-weight:bold;">'+point.y +'<span>');
});
return s.join('/')+' mmHg';
},
shared: true
},
credits: { enabled: false}
});
});
I rewrote your code in jsFiddle.
The timestamp [1464998400, 1465171200, 1465344000, 1465430400] that you used in series is pointing to the same date which is Jan 18 1970 and that's why your x-axis label seems repeating. Check out my modified code #line#54 and the label is working fine now.
pointInterval is no longer available in the new version of Highchart. You should use tickInterval instead.
I have created a high chart but would like to have a similar voting style to youtube; with positive vs negative. My issue is getting the bar to stay the full width of the graph, I know percentages can fix this but I want whole numbers.
http://jsfiddle.net/u6H3b/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft:0
},
title: {
text: 'votes'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Apples'],
title: {
enabled: false
}
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max:23,
title: {
enabled: false },
gridLineColor: '#fff',
lineColor: '#fff'
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Yes',
data: [20]
},{
name: 'No',
data: [3]
}]
});
});
One option is to use 'endOnTick':
yAxis: {
endOnTick: false,
http://jsfiddle.net/f3eFd/
If you want the end tick (23) to show, you could also add:
tickInterval:23,
http://jsfiddle.net/bLDpg/
If you really want to get fancy, you can define each tick you need. In the following code, it prints ticks at 0, 3 and at 23.
tickPositioner: function () {
var positions = [0, 3, 23];
return positions;
},
http://jsfiddle.net/aSHz3/
I think, all you need to set is endOnTick: false and maxPadding: 0, see: http://jsfiddle.net/u6H3b/1/
The only problem is that last tick is not displayed, if this is issue for you, use tickPositioner as suggested by SteveP.