I want to show some number on gauge data label like this:
I try to use category and formatter option in yAxis like this but faild!
categories: ['0','3','7','14'],
and
labels: {
formatter: function() {
if(this.value == '0' ||this.value == '3' ||this.value == '7' ||this.value == '14')
return this.value;
}
},
What is wrong with this method? also any other solution will be appreciated .
Here is a fiddle i am going to work on.
Finally i solved this. here is what i add to yAxis :
rotation:'auto',
labels: {
distance: 20,
formatter: function() {
if(this.value == '0' ||this.value == '3' ||this.value == '7' ||this.value == '14')
return this.value;
}
},
tickInterval: 1,
minorTickLength:0,
Here is the Fiddle
Related
I would like highlight the weekend in a timeseries chart. Until now and reading the documentation I think it is two ways of achieving this: plot bands or zones. I just managed to highlight the saturdays and sunday on the x axis(see code below). I would like to plot a band instead.(see 1).
xAxis: {
type: 'datetime',
crosshair: {
width: 2,
color: '#F66',
dashStyle: 'shortdot'
},
labels: {
formatter: function () {
var day = Highcharts.dateFormat('%a', this.value);
if (day == "Sat" || day == "Sun") {
return `<b>${Highcharts.dateFormat('%a %e %b', this.value)}</b>`;
} else {
return Highcharts.dateFormat('%a %e %b', this.value);
}
}
}
}
}
Here is my idea how to add plotBands dynamically based on the used data. I think that everything is clear in the code - if not, feel free to ask.
Demo: https://jsfiddle.net/BlackLabel/6n4ab7jm/
events: {
load() {
let chart = this,
plotBandAr = [],
plotBand = {
color: '#FCFFC5',
};
chart.series[0].points.forEach(p => {
// start from the saturday
if (new Date(p.x).getDay() === 6) {
plotBand.from = p.x
}
// end on the sunday
if (new Date(p.x).getDay() === 0) {
plotBand.to = p.x
}
// add plotBand on monday and reset the plotBand object
if (new Date(p.x).getDay() === 1) {
plotBandAr.push(plotBand)
plotBand = {
color: '#FCFFC5',
};
}
});
chart.xAxis[0].update({
plotBands: plotBandAr
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
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/
im using a common function to generate linechart using highchart.for certain charttype i want tooltip without any pointformat and for another in want to use formatter funcction how to acheive this.From the below code charttype 1 tooltip diappear.
tooltip: {
valueSuffix: '',
pointFormat: (chartType == 1 ? '{series.name}:
{point.y}' : '' ) ,
shared: (chartType == 1 ? true : false),
formatter: function() {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
}
else {
return false;
}
}
If you want to disable option, use null value, not empty string (''). See: http://jsfiddle.net/Yrygy/133/
However I think that it would be better to add one if-else statement, instead of three one above another, see: http://jsfiddle.net/Yrygy/134/
var chartType = 1,
tooltip = {
valueSuffix: ''
};
if (chartType == 1) {
tooltip.pointFormat = '{series.name}: {point.y}';
tooltip.shared = true;
} else {
tooltip.shared = false;
tooltip.formatter = function () {
if (chartType == 2) {
return '' + this.point.tooltip + ': ' + (chartType == 2 ? this.y.toFixed(1) : this.y.toFixed(0));
} else {
return false;
}
}
}
And then create chart:
chart = new Highcharts.Chart({
tooltip: tooltip,
// other options
});
I am using 2 arrays with some numbers and getting the percentage. What I would like to do is if both array indexes are 0 the I would like to set the Label to read "No Data".
I know I need to get the current column(point) index or something similar, I've tried using formatters to do this.
Anyways I imagine the code something like this.
xAxis: {
categories: trebleNotes,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
if(array1[currentColumn] == 0 && array2[currentColumn] == 0){
return("NO DATA");
}else{
return(this.value);
}
},
}
},
I am not sure how to get the currentColumn index and use that to do the formatting. I hope this makes sense.
If I understand you correctly, wouldn't you just want the index of the category at this.value?
labels: {
formatter: function() {
var currentColumn = -1;
for (var idx = 0; idx < this.axis.categories.length; idx++){
if (this.axis.categories[idx] == this.value){
currentColumn = idx;
break;
}
}
console.log(currentColumn);
return this.value;
}
}
Is there any way to make a Dual Axis in Highstock like this one on Highcharts?
http://www.highcharts.com/demo/combo-dual-axes
It looks like you can do it the same way as in highcharts. Each series specifies yAxis:n where n is the axis you want to plot it against, and you need to define n yAxis entries. I modified one of the example highstock demos: http://jsfiddle.net/ykfmG/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
yAxis:i
};
}
yAxis: [{
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},{opposite:true},{opposite:true},{opposite:true}],