How can I get rid of the gray bottom line on axis X?
Any help please
jsFiffle example
$(function () {
$('#container').highcharts({
title: {text:''},
yAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
labels:{enabled: false},
title: {enabled:false}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
tickWidth: 0,
categories: ['Jan', 'Feb'],
labels:{ enabled: false }
},
legend: {enabled: false},
series: [{ data: [29.9, 71.5] }]
});
});
Thanks
You were very close, simply add lineWidth: 0, see: http://jsfiddle.net/EtvMR/2/
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb'],
labels: {
enabled: false
}
},
There is a property for every axis called lineWidth which determines the width of the axis line.
setting it to a value will give the user defined width to the axis.
here it should be given as 0
lineWidth: 0
here I have updated your fiddle with changes
I hope this is what you are looking for.
You can set the CSS property display: none for the class selector highcharts-axis and it will disappear:
.highcharts-axis {
display: none;
}
See: JSFiddle
Related
I have a chart with two y-Axis. One to the left of the chart another one to the right.
The labels on the right y-Axis appear inside the chart. When I align the labels to the right the labels still overlap the y-Axis in some cases. When I add a distance x: 30, the distance becomes bigger but the labels are not fully shown anymore as they are outside the chart.
I want the labels to have a similar distance to the y-Axis as for the left y-Axis and still shown inside the chart "area".
Here a jsfiddle: https://jsfiddle.net/smaica/zrn87q0b/32/
And my chart options:
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {
Highcharts.stockChart('container', {
title: {
text: undefined,
},
series: [
{
data: [
[1279324800000,0.1],
[1279411200000,0.2],
[1279497600000,0.3],
[1279584000000,0.4],
[1279670400000,0.5],
[1279756800000,0.6],
[1279843200000,0.7],
[1279929600000,0.8],
[1280016000000,0.7],
[1280102400000,0.6],
[1280188800000,0.5],
[1280275200000,0.4],
[1280361600000,0.3],
[1280448000000,0.2],
[1280534400000,0.1]
],
name: "series1",
yAxis: 0
},
{
data: [
[1279324800000,0.8],
[1279411200000,0.7],
[1279497600000,0.6],
[1279584000000,0.5],
[1279670400000,0.4],
[1279756800000,0.3],
[1279843200000,0.2],
[1279929600000,0.1],
[1280016000000,0.2],
[1280102400000,0.3],
[1280188800000,0.4],
[1280275200000,0.5],
[1280361600000,0.6],
[1280448000000,0.7],
[1280534400000,0.8]
],
name: "series2",
yAxis: 1
}
],
plotOptions: {
series: {
dataGrouping:{
enabled: false
},
lineWidth: 1.5,
fillOpacity: 0.5,
}
},
chart: {
borderWidth: 0,
plotShadow: false,
plotBorderWidth: 0,
alignTicks: true,
zooming: {
type: 'x',
},
},
accessibility: {
enabled: false
},
yAxis: [{
lineWidth: 0.1,
tickWidth: 0.1,
opposite: true,
visible: true,
type: 'linear',
alignTicks: true,
labels: {
align:'right',
},
},
{
lineWidth: 0.1,
tickWidth: 0.1,
alignTicks: true,
opposite: false,
type: 'logarithmic',
gridLineColor: 'transparent',
visible: true
}],
xAxis: {
lineWidth: 0.1,
tickWidth: 0.1,
tickLength: 5,
min: Date.UTC(2010, 6, 1),
ordinal: false
},
rangeSelector: {
enabled: false
},
navigator: {
height: 30,
outlineWidth: 0.1,
handles: {
lineWidth: 0.1,
},
xAxis: {
gridLineWidth: 0.1,
tickLength: 0,
}
},
scrollbar: {
enabled: false
}
}
);
});
Thanks!
In Highstock, the yAxis.labels.align is right by default, but yAxis is the opposite as well. It might seem not intuitive, but you only need to change yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/pt2sb60x/
API Reference:
https://api.highcharts.com/highstock/yAxis.opposite
Is it possible to remove/hide the concentric circles (yAxis plotLines) that Highcharts automatically draws in polar charts? Setting the yAxis lineWidth to zero did not work. Also, setting the yAxis plotLines to an empty array did not work.
These options successfully create a green plot band filling the chart, but do not create a red plot line in the chart. However, what appears to be a light grey y-axis plot line circle is drawn at y=5. This is the line I want to remove or hide.
{
colors: COMPETITOR_COLORS,
chart: {
polar: true,
backgroundColor: 'pink',
plotBackgroundColor: KAHN_DARK_GRAY_BG,
},
title: {
text: '',
},
tooltip: {
valueDecimals: 2,
headerFormat: '<br/>',
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
},
pane: {
startAngle: 0,
endAngle: 360,
},
xAxis: {
min: 0,
max: 360,
tickInterval: 45,
labels: {
format: '{}',
},
},
yAxis: {
min: 0,
max: 10,
plotLines: [{color: 'red', value: 7, width: 3}],
plotBands: [{color: 'green', from: 0, to: 10}],
labels: {
format: '{}',
},
},
plotOptions: {
series: {
pointStart: 45,
pointInterval: 90,
},
column: {
pointPadding: 0,
groupPadding: 0,
},
},
series: kahnSeries,
}
The lines that you want to remove are grid lines, not plot lines. To remove them use:
yAxis: {
gridLineWidth: 0,
...
},
Live demo: http://jsfiddle.net/BlackLabel/46xvajn5/
API Reference: https://api.highcharts.com/highcharts/yAxis.gridLineWidth
I am looking for the desired output like so:
series.dataLabels.align: left/right` isn't cutting it. It only makes it appear just after the blue rectangle of each bar and not on the far right, which is not what I want. I have also looked at the highcharts api a little bit and I was not able to find a chart option that gets the job done. Thanks in advance.
My current chart options:
var options = {
chart: {
renderTo: 'container',
type: 'bar',
},
credits: {
enabled: false
},
colors: ['#024a7a'],
title:{
text:null
},
plotOptions: {
bar: {
animation: false
},
series: {
showInLegend: false,
states: {
hover: {
enabled:false
}
}
}
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['SAC 1', 'SAC 2', 'SAC 3'],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
}],
yAxis: [{
gridLineWidth: 0,
labels: {
enabled: false
},
minorGridLineWidth: 0,
title: {
text: null
}
}],
series: [{
data: [10, 5, 15],
dataLabels: {
align: 'left',
enabled: true
}
}]
};
var chart = new Highcharts.Chart(options);
});
One of the ways to achieve that effect is passing specific xAxis and yAxis configuration objects, which contains few parameters:
xAxis: [{
opposite: true,
type: 'category',
labels: {
formatter: function() {
return this.chart.series[0].processedYData[this.pos] + ' %'
},
},
lineWidth: 0,
minorTickWidth: 1,
tickWidth: 0
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
},
gridLineWidth: 0,
max: 100
},
Configuration above fills labels by the series data values, so you should prepare series array similar like below:
series: [{
data: [31, 15, 9, 5]
}],
Lets look for this JSFiddle:
http://jsfiddle.net/daniel_s/yp9h6b7m/
Best regards!
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/
I am having a problem with Highstock. I have a multi-pane chart (multiple charts stacked on top of each other). When I specify a min and max value for the y-axis, if any value in the series is less than the min value, it will extend below the chart, usually extending into the chart below. For some reason, the same is not true for when a data point is above the max value. I can't tell if this is a bug in Highstock or just something I am doing wrong.
I understand that this is an unusual use case for Highstock, but it is necessary for the application I am developing. The only example I can find for multi-pane charts with Highstock is on their demo page at http://www.highcharts.com/stock/demo/candlestick-and-volume, but that is a different situation.
Please see my example: http://jsfiddle.net/afoster777/UJaJG/
Here is my configuration:
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
plotOptions: {
shadow: false,
series: {
connectNulls: false
},
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2,
plotBackgroundColor: "#FFFFFF"
}
},
navigator: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
ordinal: false
},
yAxis: [{
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}, {
title: {
text: "Y"
},
min: 0.8,
max: 0.9,
labels: {
align: 'right',
x: -6,
y: 3
},
lineWidth: 1,
top: 320,
height: 250,
offset: 0,
startOnTick: false,
endOnTick: false
}],
series: [{
type: 'line',
id: 0,
name: 'Series1',
yAxis: 0,
data: series1data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}, {
type: 'line',
id: 1,
name: 'Series2',
yAxis: 1,
data: series2data,
marker: {
enabled: false
},
tooltip: {
valueDecimals: 2
},
gapSize: 2,
connectNulls: false
}]
});
I would appreciate any suggestions.
Edit: Apparently there is an open issue about this already (Issue# 1387). Does anyone have any ideas for a workaround?
Apparently github user sappling has made a fix for this problem and submitted a pull request. I included sappling's version of Highstock <script src="http://raw.github.com/sappling/highcharts.com/clip/js/highstock.src.js"></script> instead of the vanilla one, and the problem seems to be fixed. http://jsfiddle.net/afoster777/jEZ9w/