I am looking to hide Y Axis label for Highchart Gantt.
In my fiddle that I attempted you will note that I am looking to completely remove Y Axis lable but my attempt creates empty column.
yAxis: [{
labels: {
enabled: false
},
}]
Wasn't able to location anything in Highcharts Documentation as well
Use the visible property:
yAxis: [{
visible: false
}]
Live demo: http://jsfiddle.net/BlackLabel/L1gt67zp/
API Reference: https://api.highcharts.com/gantt/yAxis.visible
Related
Hello Highcharts and stackoverflow,
I would like to make it easy for end users to compare wedgets in a Variable radius pie chart (basically the same as Line to the Y axis on hover but radial). As such, when they hover on a wedge, I would like to draw a "ring" around the circle for easy comparisons. This would be appear/disappear/change based on which point you are hovering on.
(in some ways - like a mix between the visualization of the Variable radius pie chart with the concept of an axis like a Polar/Radar Chart)
Any ideas?
Use column series in polar chart with crosshair:
chart: {
polar: true
},
series: [{
type: 'column',
pointPadding: 0,
groupPadding: 0,
colorByPoint: true,
data: [...]
}],
yAxis: {
crosshair: {
color: 'red',
zIndex: 3
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5005/
API Reference:
https://api.highcharts.com/highcharts/chart.polar
https://api.highcharts.com/highcharts/yAxis.crosshair
I have a type area chart, with minor grid lines and a datetime xAxis. data is feed through an array of y values, and I got to render xAxis labels depending on the data length successfully.
My issues are:
the chart has a unwanted padding on the X axis
the markers don't align with their labels
Check it:
Here's a working fiddle: https://jsfiddle.net/fernandaparisi/e07q32ay/53/
I noticed that if I remove all the max, min, tickInterval, pointStart and pointInterval properties the markers are aligned correctly, but the chart doesn't expand its full available width.
margin and spacing chart properties seem to affect the chart as a whole, and not the plotted area.
Any thoughts?
The padding is caused by combined tickInterval and endOnTick: true, to remove it just disable endOnTick.
To position the labels in a different way use align, x and y properties.
xAxis: {
labels: {
align: 'center',
y: 30,
formatter: function() {
return Highcharts.dateFormat('%e %b', this.value);
},
rotation: -45
},
title: undefined,
type: 'datetime',
min: lastSunday - (weekLength * (data.length - 1)),
max: lastSunday,
tickInterval: weekLength,
endOnTick: false,
minorTickInterval: weekLength
}
Live demo: https://jsfiddle.net/BlackLabel/eLbp48d3/
API Reference:
https://api.highcharts.com/highstock/xAxis.labels.align
https://api.highcharts.com/highstock/xAxis.endOnTick
I am trying to generate heat map for the large set of series data with same x and y-axis categories and scrollbars enabled for both x & y-axis. Problem is y-axis is showing up some additional labels with an empty plot area which did not get solved by setting endOnTicket to false
Here is the graph with sample data, Please help!
http://jsfiddle.net/graji/mdu37kq8/9/
yAxis: {
startOnTick: false,
endOnTick: false,
categories: ['abc', 'abc2', 'abc3', 'abc4', 'abc5', 'abc6', 'abc7', 'abc8', 'abc9', 'abc10', 'abc11', 'abc12', 'abc13', 'abc14', 'abc15', 'abc16', 'abc17', 'abc18', 'abc19', 'abc20', 'abc21', 'abc22', 'abc23', 'abc24', 'abc25', 'abc26', 'abc27', 'abc28', 'abc29', 'abc30', 'abc31', 'abc32', 'abc33', 'abc34', 'abc35', 'abc36', 'abc37', 'abc38', 'abc39'],
title: null,
min: 0,
max: 10,
scrollbar: {
enabled: true
}
}
You have more than 1000 points which causes the third value to be treated as Y value. You need to disable turboThreshold property:
plotOptions: {
series: {
turboThreshold: 0
}
},
Live demo: http://jsfiddle.net/BlackLabel/f2kqgson/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.turboThreshold
I use Highcharts to visualize 3D charts in my project. Particularly I am interested in showing a 3D scatter plot like this. Below the chart you can see the options as well as the respective jsFiddle.
Is there a possibility to display a label with every point's name always i.e. that hovering is not required?
Thanks!
Within the series you can enable the datalabels like this:
series: [{
dataLabels: {
enabled: true,
},
}]
http://jsfiddle.net/oghokm8w/1/
then you could use the formatter to customise the text to be displayed:
series: [{
dataLabels: {
enabled: true,
formatter: function () {
return this.point.x;
},
}
}]
I'd like to remove the value box from a Highcharts angular gauge.
I'm not sure it is possible...I have tried messing around with the JSFiddle demo trying to remove it and haven't been able to.
I was able to remove the minor and major ticks by adding
minorTickInterval: 'none',
tickPixelInterval: 'none'
But I can't figure out how to remove the value from the middle of the gauge.
or you can achieve the result you want just by adding the following lines:
series: [{
dataLabels: {
enabled: false
}
}]
You should add dataLabels.formatter to the series part of your gauge to remove it.
dataLabels: {
formatter: function () {
return null;
}
},
Live example: jsFiddle