I have two series that should we plotted on the same graph, as is shown in the example,
how can I 'sync' the axis so that both '0' (origin) lines align?
I cannot use the linkedTo property because then the values are the same as well, while these should be independent. Only the position of the 0-line should be the same.
yAxis: [{ // Primary yAxis
labels: {
formatter: function() {
return this.value +'°C';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}
Something similar is done here, for first button: http://jsfiddle.net/Fusher/5m9JW/
It's not perfect solution, but allows to manage that in afterSetExtremes
You can try to use min value for second (column) yAxis, with negative value.
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
},
},
In HighCharts series can have a color (black) and a negativeColor (red) for positive and negative values easy like this:
series: {
color: 'black',
negativeColor: 'red'
Is there an easy way to do the same for the labels?
plotOptions: {
series: {
dataLabels: {
style: {
color: black
//no negativeColor...
There is no built-in option like that. Still, you can define a data label for each point and set a proper color if the value is negative.
data: data.map(function (point) {
return point < 0
? {y: point, dataLabels: {color: 'black'}}
: point;
})
example: http://jsfiddle.net/s8ay794r/1/
Thanks for your help. I have having a heck of a time trying to get something to work which is throwing me for a loop..
As seen in this jsfiddle (code copied below) i have a bar chart with a really long label which is wrapping.
What i am hoping to do i max out the label portion of the chart so that the label doesn't wrap while reducing the size of the actual data chart.
As an example; in the jsfiddle the label is maybe 30% of the total width and the bar data is 70%. Knowing my data, the labels would take up 80% of the width and the data would be in the last 20%.
Thoughts? Thanks, Steven.
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
xAxis: {
labels: {
style: {
"textOverflow": "none",
}
} ,
categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
},
series: [{ data: [29.9, 71.5] }]
});
});
Okay, looks like I got what i was looking for. Hope this helps someone else.
The key for me was setting the maringLeft attribute on the chart:
chart: {
type: 'bar',
marginLeft: 460
},
That, along with modifying the width, 'min-width' and useHTML on the label and lable style for the xAxis (Bar chart)
xAxis: {
categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
labels: {
style: {
width: '400px',
'min-width': '350px'
},
useHTML : true
}
},
Thanks, Steven.
I'm using some PHP loops generate a series of charts for individuals.I'm trying to place the X-Axis category point on top of my column for each point. The relavent code is:
xAxis: {
categories: [<?php echo implode(',', $year); ?>],
title: {
text: 'Year'
}
},
yAxis: [{
min: 0,
title: {
text: 'ADR'
},
stackLabels: {
enabled: true,
formatter: function() {
return '<b>' + this.x.category + '</b>';
},
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
I'm unsure how to go about this i've tried this.x, this.x.category, this.x.value and so far I've not been able to get my x-axis category value. How do I do this in Highcharts?
The stack is a separate entity from the series or the point, so doesn't have direct access to the same properties.
But with a little digging, you can make the link from the stack to the x axis categories (I always just do a console.log(this) within the formatter to see what it can access...)
formatter: function() {
var x = this.x;
var cat = this.axis.chart.xAxis[0].categories[x];
return cat;
}
Example:
http://jsfiddle.net/jlbriggs/xgucespk/
You could also just define your categories array outside of the chart, and reference that array for both the categories definition, and in the formatter function.
Example:
http://jsfiddle.net/jlbriggs/xgucespk/1/
I took a sample jsfiddle and modified it here just to show a sample of what I experienced:
http://jsfiddle.net/pMwuv/
Here is what my actual datalabel code looks like:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
color: 'black'
},
formatter: function () {
if (this.x == 19) {
return this.y + '<br>units left';
};
}
}
What I am having on my area chart is that the last data label is cut off. Is there a way to increase the width of the container or add some type of padding so that the full label shows?
Just changing the x and y position of the label will not work for my area chart. I have my chart customized so that only the last point of the chart has a data label and i want it aligned to the right of the last point and not within the chart.
But if we can get the above sample fiddle to work then the same solution should work for me.
You can add marginRight to chart like this:
chart: {
renderTo: container,
width: 550,
marginRight: 35
}
jsFiddle.
This is not a direct solution, but I suggest you to put the label at the yAxis:
yAxis: {
title: {
text: 'Units left'
}
},
And remove the other attributes, leaving just enabled: true:
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
},
See the fiddle
You can set spacingRight and add correct value.