I am using a Area/line chart and plotting for 2 points. Also using a xAxis Label formatter property for customizing the label to display as follows. But when using this the chart is not generated. And also I tried to remove the formatter property, the chart id generated but the xAxis label is displayed as 0.5 [At least we need to get label text from categories]. I have included 2 jsfiddle url where we tried two approaches. Please help and provide solution for displaying the xAxis label what we provided in the categories.
JsFiddle:
http://jsfiddle.net/jw2p5Lxa/17/
http://jsfiddle.net/p2EYM/116/
labels: {
formatter: function() {
return this.value.substring(0, this.value.indexOf('_'));
}
Thanks in advance!
You've essentially told the chart, with your min and max values, to cut off the first and last label.
Get rid of this:
min: 0.5,
max: categories.length - 1.5,
And use this:
minPadding:0,
maxPadding:0,
Updated Fiddle:
http://jsfiddle.net/jlbriggs/p2EYM/118/
Output:
You can save categories in an array and use xAxis.formater() to display specific label in your first example:
var categories = ['Jan 12_Jan 12', 'Feb 12_Feb 12'];
formatter: function() {
return categories[this.value];
}
Also, do not use min and max properties. In the second example getting rid of min/max should be enough.
Examples:
http://jsfiddle.net/jw2p5Lxa/21/
http://jsfiddle.net/p2EYM/120/
Related
if I have a large amount of data then the xAxis label is not showing properly. you can see in this code: https://jsfiddle.net/4nvmuc25/127/
if I have a low amount of data then it's fine my xAxis label is showing correctly.
so I want to show the xAxis label properly if I have a large amount of data.
Restriction: 1:you can't change the rotation property for xAxis.
2:xAxis labels should not intercept each other.
3:you can't do by css.
Not restriction: you can set tickInterval, step property in xAxis but remember the amount of data is dynamic, it could be any number.
You should not use category x-axis type in this case. In API we can read:
step: number
...
By default, when 0, the step is calculated automatically to avoid
overlap. To prevent this, set it to 1. This usually only happens on a
category axis, and is often a sign that you have chosen the wrong axis
type.
As a solution use linear axis with a custom formatter function for labels:
const labels = [
"Apr-1",
"May-2",
...
];
Highcharts.chart('container', {
xAxis: {
...,
labels: {
...,
formatter: function() {
return labels[this.pos]
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/Lk8aogpq/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
I have a highchart which shows date label on x-axis, When there are more than 10 dates I'm using a logic of dividing the total dates by 10 and giving the resulting value to step. Because of step value it is not showing the last label.
Please help if anybody know's the solution.
I tried with showLastLabel and endOnTick but these are not working.
xAxis: {
categories: xcategories,
labels: {
step: getStep(chartJson.length)
}
}
function getStep(jsonLength){
var step =1;
if(jsonLength>=10){
step= (parseInt)(jsonLength/10);
}
return step;;
}
Set showLastLabel parameter as true
try setting max value for the xAxis. You would have to calculate last step dynamically if your categories are not fixed.
Documentation here : https://api.highcharts.com/highcharts/xAxis.max
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
I only want to know if it's possible delete, or don't show, the frame in the middle of Gauge Chart that contains the value (below pivot). I got more than one serie and values overlap each other.
Thanks!!
One way is, you can format your datalabels and return nothing in the formatter () function.
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
}
}
Fiddled version. (tweaked from Highchart demo sample )
Hope this is you need.
Another option is
dataLabels: false
Documentaion: Gauge DataLabels enabled