I am trying to remove the offset on the tick of the x-axis.
I want the first tick 10/8 to start from the x-axis and y-axis intersection.
10-8 should be on the marker which is between the two labels.
I have following code for it in highchart.
xAxis: {
categories: categories,
title: {
text: title_x_axis,
style: {
fontWeight: 'bold'
},
formatter: function(){
return "<h3><b>" + this.value + "</b></h3>";
}
},
min: 0,
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
align: "left"
},
Max padding and min padding are set to 0, So I don't know what the problem is?
EDIT:
I have created a fiddle of the type of chart I am dealing with.
Note Image below has different x-axis values as I am not using the same value of fiddle.
Also I have set tickmarkPlacement: "on" after I took that snapshot.
I want Jan label to start from the beginning of line. It has some offset currently.
Can anyone help me with this?
You could use (assuming 'categories' is your array of categories)
min: 0.5,
max: categories.length-1.5,
startOnTick: false,
endOnTick: false,
Example: http://jsfiddle.net/27hg0v06/1/
Use newset version of highcharts to get fully working tooltip:
<script src="http://github.highcharts.com/highcharts.js"></script>
Add pointPlacement: 'on' in plotOptions.
plotOptions: {
series: {
pointPlacement: 'on'
}
}
Take a look at the tickMarkPlacement property:
http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
By default, it is 'between', which is what you are seeing on your chart.
Setting it to 'on' should do what you need.
You can look at the minPadding and maxPadding properties in addition to the tickMarkPlacement:
http://api.highcharts.com/highcharts#xAxis.minPadding
http://api.highcharts.com/highcharts#xAxis.maxPadding
Updated Fiddle:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 1,
tickmarkPlacement: "on",
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
offset: 0
},
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
You Just Need to Add the following before series object:
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
Related
I have integrated a column highchart in my application having primary and secondary y-axis(dual-axis). Now I need to add an image/icon below both y-axes for reference of the axis. I have implemented below code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Now I need to add an icon below both y-axes for reference of the axis. Any help would be definitely appreciated!
You can add the image as an axis title located below the plot area:
yAxis: [{
title: {
text: '<img src="https://www.highcharts.com/samples/graphics/sun.png" />',
align: 'low',
useHTML: true,
rotation: 0,
reserveSpace: false,
y: 40
}
}, {...}]
Live demo: http://jsfiddle.net/BlackLabel/mzquL6je/
API Reference: https://api.highcharts.com/highcharts/yAxis.title
I'm using highcharts to display stackbars graph.
I'd the y axis label to appear on top of the y axis, that's why I'm setting its offset to -10. however, when the graph's title is not displayed I cannot see the axis label.
Here's an example with graph title and axis title
Here's an example without graph title and from some reason axis title disappears
Here's how I set my yAxis label:
yAxis: {
lineWidth: 2,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -20
}
},
updated Link
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: [70, 0]
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
lineWidth: 1,
tickWidth: 1,
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
margin: [70, 0]
I try to use a horizontal crosshair as some kind of auxiliary line to compare the upper and lower endpoints of the errorbars.
From a statistical point of view it is some kind of virtual significance test by comparing the confidence intervals.
My problem is that given a column chart I am not able to reach the lower endpoint of the errorbars with the crosshair.
Here is a fiddle (simplified demo from Highcharts).
var chart;
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature vs Rainfall'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip:{
crosshairs: [false, {color: 'red'}],
formatter: function(){
return false;
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Rainfall error',
type: 'errorbar',
yAxis: 0,
data: [[42, 51], [66, 73], [90, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [90, 110], [52, 56]],
}]
});
});
Any suggestions are welcome!
Error bars are paths in SVG, so there's no such thing like lower/higher part of it. If you check highcharts.src.js file and search for drawCrosshair, you will find method responsible for rendering crosshair. As you can see, there is line:
pos = (this.chart.inverted != this.horiz) ? point.plotX : this.len - point.plotY;
Which takes point.plotY to get position of the crosshair. In error bars plotY is top of the point. If you replace point.plotY with point.lowPlot (only for error bars!) then you will render crosshair on the bottom part of the error bar.
I'm trying to put Y-Axis title on top right of the Y-Axis, right below the chart title. However, when I insert the axis title, the whole graph moves to the right. I tried to used spacingLeft to set the position of the chart, but nothing changes. Is there a way to keep the position of the chart even if I add the axis title?
Here is my code:
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'Chart title',
y: -10
},
yAxis: {
title: {
text: 'aaaaaaaaaaaaaaaaaaa',
align: 'high',
rotation: 0,
x: 100,
y:-20
},
labels: {
align: 'high',
x: 0,
y: -5
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
jsfiddle: http://jsfiddle.net/8m7rc/1/
Min Sun Song, you can use offset property to reduce that gap.
offset: -120,
I've updated you fiddle here
Hope this is what you are looking for.
You can set marginLeft property for a chart. See demo.
http://jsfiddle.net/nUCBj/1/
How can I prevent the datalabels from overlapping? I have tried using the formatter option and positioning the dataLabel using CSS position/top/bottom, etc... The datalabels are required. I can't just use the tooltip in it's place :-)
Thank you,
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
backgroundColor: 'rgba(255, 255, 255, 0.7)',
borderWidth: 1,
shadow: true,
borderRadius: 1,
useHTML: true,
padding: 1
}
}
},
series: [{
name: 'test',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] },{
name: 'test2',
data: [31, 80, 106.4, 22, 150, 17, 135.7, 14, 230, 181, 9, 54]
}]
});
});
The data attribute in the series can be passed in as an array of objects instead of as an array of numbers. Each object can define it's own dataLabels options (http://api.highcharts.com/highcharts#series.data). For the first series you can align the points to the left, and the second to the right so they do not overlap.