Given a max number to the yAxis, for example:
yAxis: {
min: 0,
max:5
},
The chart will look like this:
However, is it possible to render the outer part? Just like the following below:
Instead of setting yAxis.min and yAxis.max, you can define tickPositions and disable endOnTick for yAxis and set offset for xAxis. For example:
yAxis: {
endOnTick: false,
tickPositions: [0, 2, 4, 6]
},
xAxis: {
offset: 62
},
pane: {
size: '100%'
}
Live demo: http://jsfiddle.net/BlackLabel/o0w1v83e/
API Reference: https://api.highcharts.com/highcharts/yAxis
Another way is to overwrite Highcharts clipping behaviour.
(function(H) {
H.SVGElement.prototype.clip = function() {};
H.wrap(H.Series.prototype, 'isPointInside', function(proceed) {
return true;
});
}(Highcharts));
Live demo: http://jsfiddle.net/BlackLabel/otchz6vL/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Related
I would like to display only the first and the last label on my xAxis. This would give enough of a »frame« for the user. However, I don't succeed in it. I am working with a synchronized chart, which can be found here. Is the second and third »column« of (smaller) graphs, I am targeting at.
I tried to work with »startOnTick« and »endOnTick«, but it won't do it.
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
visible: i === 1,
showFirstlabel: true,
showLastlabel: true,
startOnTick: true,
endOnTick: true,
labels: {
step: 500,
format: '{value}'
}
},
What is the correct way to force Highcharts to display only first and last label?
Here is a short fiddle (don't know why the line does not appear; it shows the values with mouseover...).
Thanks for any hints.
You can use the xAxis.labels.formatter callback to show wanted ticks:
Demo: https://jsfiddle.net/BlackLabel/m2Ln8sdg/
xAxis: {
tickAmount: 10,
labels: {
formatter() {
if(this.isFirst || this.isLast) {
return this.value
} else {
return ''
}
}
}
},
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter
If you want to have more control about it (like hide label and tick) you can use the load callback method and proper logic to hide/show ticks:
Demo: https://jsfiddle.net/BlackLabel/fbcdskmv/
chart: {
events: {
load() {
let chart = this;
for (let i in chart.xAxis[0].ticks) {
//hide all
chart.xAxis[0].ticks[i].label.hide()
chart.xAxis[0].ticks[i].mark.hide()
// show first and last tick
if (chart.xAxis[0].ticks[i].isFirst || chart.xAxis[0].ticks[i].isLast) {
chart.xAxis[0].ticks[i].mark.show()
chart.xAxis[0].ticks[i].label.show()
}
}
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
Or use the tickPositioner callback to achieve it: https://api.highcharts.com/highcharts/xAxis.tickPositioner
The above answers are good, but i just wanted to show another approach which works just fine.
In my styling i do this;
.highcharts-xaxis-labels > text:not(:first-child):not(:last-child) {
visibility: hidden !important;
}
Summing up #luftikus143 and #Sebastian Wędzel comments:
const data = [
['Jan 2020', 167],
['Feb 2020', 170],
['Mar 2020', 172]
];
xAxis: {
type: 'category',
tickPositions: [0, data.length - 1]
}
Will output only the first and last labels. #martinethyl's workaround answer might need some extra tweaks specially if you have multiple data points. Suggestions (might not work well with smaller media types):
xAxis: {
type: 'category',
labels: {
rotation: 0,
x: 5, // Optional: moves labels along the x-axis
style: {
textOverflow: 'none', // Removes ellipsis
whiteSpace: 'nowrap', // Gets the label text in one line
},
},
Area chart looks flat due to the fact that Y axis always starts from 0 in compare to a line chart which in the same data uses some sort of auto-fit.
Plunkr
I would like to have similar auto-fit on the area chart that works on line chart as default.
(Using yAxis[0].setExtremes is not an option really).
Is there any configuration to do so?
You can achieve it by setting xAxis.min property like that:
yAxis: {
min: 10000,
labels: {
formatter: function() {
return this.value / 1000 + 'k';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/Layfnuz4/
API reference:
https://api.highcharts.com/highcharts/xAxis.min
The second approach is to set plotOptions.area.threshold
plotOptions: {
area: {
threshold: 10000,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/r7qc1jpk/
API reference:
https://api.highcharts.com/highcharts/series.area.threshold
EDIT
Automatic approach: set series.area.softThreshold = true as line series has.
series: [{
softThreshold: true,
name: 'Data',
data: data
}]
Demo:
https://jsfiddle.net/BlackLabel/8uj3kz4a/
API reference:
https://api.highcharts.com/highcharts/series.area.softThreshold
so by reading the documents by default when you enable dataLabels on the chart it will render yAxis values, but is it possible to make it render xAxis values?
You can format labels in Highcharts in two ways:
Use dataLabels.formatter where you have access to this (point):
formatter: function () {
return this.x;
}
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/1/
Use dataLabels.format, where you can put simple template:
format: "{x}"
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/
Note:
You can use any property from a point, to show this in a label, both format and formatter can be used:
format: '{point.customValue}'
Or:
formatter: function () {
return this.point.customValue;
}
Where a point is defined as an object:
series: [{
data: [{
x: 10,
y: 15,
customValue: '10x10'
}]
}]
Demo: http://jsfiddle.net/BlackLabel/t2cek68m/3/
Yes it's possible just add this code :
dataLabels: {
enabled: true,
formatter: function() {
return this.x;
}
},
Fiddle
My requirement is to create a spiderweb highchart with values on each axis where each axes have different scales.Is it possible? I have attached a same output of my requirement.
Use multiple yAxis and assign them to the separated panes with startAngle.
Parser
var colors = Highcharts.getOptions().colors,
each = Highcharts.each,
series = [{
yAxis: 0,
data: [10, 20, 30]
}, {
yAxis: 1,
data: [1, 2, 3]
}, {
yAxis: 2,
data: [4, 2, 1]
}, {
yAxis: 3,
data: [5, 1, 3]
}, {
yAxis: 4,
data: [2, 3, 4]
}],
yAxis = [],
panes = [],
startAngle = 0;
each(series, function(serie, i) {
yAxis.push({
pane: i,
showLastLabel: true,
gridLineWidth: i === 0 ? true : false,
labels: {
useHTML: true,
formatter: function() {
return '<span style="color:' + colors[i] + '">' + this.value + '</span>';
}
}
});
panes.push({
startAngle: startAngle
});
startAngle += 72;
});
Chart configuartion
$('#container').highcharts({
/*
chart options
*/
pane: panes,
yAxis: yAxis,
series: series
});
Example:
http://jsfiddle.net/6jmqb1r8/
I believe Sebastian Bochan's answer is rock solid due to his suggestion of the pane attributes. However, I was tinkering around with another method and wanted to share it with you and the community.
My solution makes use of "dummy" series, which are series that the user does not see or interact with, but can help with customized features such as your labels.
I added six "dummy" series that contain the labels for each spoke of the spider chart. The first, for the "zero" value, is blank, but the others will show data labels for the first, second, third, etc. points along the spoke.
After the chart is drawn, I use the addSeries() function to add these "dummy" series to the chart:
// Add "dummy series to control the custom labels.
// We will add one for each spoke, but first will always be
// overriden by y-axis labels; I could not figure out how to
// disable that behavior.
// The color, showInLegend, and enableMouseTracking attributes
// prevent the user from seeing or interacting with the series
// as they are only used for the custom labels.
var chart = $('#container').highcharts();
var labelArray = [
['','1','2','3','4','5'],
['','j','k','l','m','n'],
['','one','two','three','four','five'],
['','u','v','w','x','y'],
['','a','b','c','d','e']
];
for (var i = 0; i<=5; i++) {
chart.addSeries({
name: 'dummy series #' + i + ' for label placement',
data: [
{ name: labelArray[0][i], y: i },
{ name: labelArray[1][i], y: i },
{ name: labelArray[2][i], y: i },
{ name: labelArray[3][i], y: i },
{ name: labelArray[4][i], y: i }
],
dataLabels: {
enabled: true, padding: 0, y: 0,
formatter: function() {
return '<span style="font-weight: normal;">' + this.point.name + '</span>';
}
},
pointPlacement: 'on',
lineWidth: 0,
color: 'transparent',
showInLegend: false,
enableMouseTracking: false
});
}
A few items to note:
lineWidth: 0 and color: 'transparent' makes the "dummy" series lines invisible
showInLegend: false prevents them from showing up in the legend
enableMouseTracking: false prevents the users from interacting with them
Here is the fiddle that shows how this works: http://jsfiddle.net/brightmatrix/944d2p6q/
The result looks like this:
Just on quirk that I noted in my comments: I could not figure out how to override the labels on the first spoke (at the 12-o-clock position). If I set the y-axis labels to "false," it refused to show anything, even the custom data labels I set in the "dummy" series. Therefore, I suggest that your first spoke be the numerical labels in your example.
I realize this is perhaps a more complicated route, but I hope it's helpful to you and others in some way.
http://jsfiddle.net/wtftc/cGbUh/
$(function () {
$('#container').highcharts({
chart: {
plotBorderWidth: 1
},
xAxis: {
},
yAxis: [{
startOnTick: true,
endOnTick: true,
}, {
opposite: true,
title: {
text: null,
}
}],
title: {
text: '',
},
series: [{
data: [-67900.92, 454001.7, -204238.28, 322154.52, 162814.29, 940881.87, 454987.58, -190981.9, 77289.43, -578758.66, 232812.59, -553224.3, -161440.06, 203872.86, -487226.65, 582178.18, 88564.43, 250057.57, -62186.0600000001, 377721.25, -196420.64, 38713.0099999999, 284969.83, 166221.67],
}]
});
// the button action
$('#button').click(function() {
var chart = $('#container').highcharts();
var yAxis = chart.yAxis[0];
yAxis.options.startOnTick = false;
yAxis.options.endOnTick = false;
chart.yAxis[0].setExtremes(-1034970.057, 1034970.057);
});
});
I created a jsfiddle example of what I am trying to do. I load up a chart with the data in the example, then I want to set custom values for my axis. The extremes I am setting are -1034970.057, 1034970.057 because I want my y axis values to be symmetric.
However, what I end up with in the chart is yAxis extremes of -1.5m and +3m rather than -1.5m and +1.5m. I am asking it to be symmetric, but after you push the set extremes button, you can see that it is not symmetric.
My data is dynamic and changes based on the settings on the page they are looking at, so this data is just an example of one of the many scenarios that I can encounter. This means that I can't hard code a tick interval or tick count. Is there a way to have this be symmetric?
I got it working by setting the start/endOnTick setting to false in the chart and then to true on click.
http://jsfiddle.net/uNvvk/
yAxis: [{
startOnTick: false,
endOnTick: false,
}, {
yAxis.options.startOnTick = true;
yAxis.options.endOnTick = true;
I've no idea why that works though!