Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
Related
I have an issue where I have nested array data set consisting of [x,y] coordinates for a spline or scatter chart in rails LazyHighCharts, and the y coordinate is the date, in milliseconds, such as 1776600000000.
Is there such a thing as yDateFormat for tooltip ?
It seems logical there would be, since there is a:
tooltip: {
xDateFormat: '%Y-%m'
}
The whole idea is that when I mouse over a data point on a spline or scatter chart(I'm trying either option), the date will popup. But right now the date is popping up in a huge ms number, 1776600000000. I am not getting a fix to day.
Additionally, perhaps it would be nice to also include a pointFormat for something like:
tooltip: {
pointFromat: "Yada yada {point.y} and yadayda {point.x}"
xDateFormat: '%Y-%m'
}
Also for my y-axis settings, I have:
`chart.yAxis(title: { text: 'Yadayada'}, type: 'datetime' )
Any help appreciated. Pretty new to highcharts, and relatively newer to Rails
From Highcharts site you can use the formatter callback to return wanted date format.
Demo: https://jsfiddle.net/BlackLabel/4pf1xw02/
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.y)) +
' date';
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
Consider this example:
http://jsfiddle.net/1pbhtbwo/2/
with these plot options:
plotOptions: {
macd: {
macdLine: {
styles: {
lineColor: "blue",
lineWidth: 1
}
},
signalLine: {
styles: {
lineColor: "red",
width: 1
}
},
marker: {
fillColor: "lightblue"
// width:1,
}
},
}
On the tooltip, only MACD has the color code. It is hard for the user to know which line is Signal and which line is Value.
How can I add a color for Value, Signal and Histogram on the tooltip to make it easy to distinguish them? Ideally, this is what I need:
I found this example that is closer to what I want by creating a separate series for each sub-series of the indicator, but apparently that plugin is not supported anymore.
This is much more needed for other indicators like ichimoku cloud. It's really hard to know which line is which:
This format string defines properly colored dots:
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b><br/>' +
'<span style="color:{series.options.macdLine.styles.lineColor}">\u25CF</span>Value: {point.MACD}<br/>' +
'<span style="color:{series.options.signalLine.styles.lineColor}">\u25CF</span>Signal: {point.signal}<br/>' +
'<span style="color:{series.options.marker.fillColor}">\u25CF</span>Histogram: {point.y}<br/>'
Live demo: http://jsfiddle.net/BlackLabel/w2v8v2r1/
I used references to series options to get the colors used on the graph.
The original tooltip.pointFormat value can be found in core code of MACD indicator: https://code.highcharts.com/stock/indicators/macd.src.js
In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner
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
Working on a project where Highcharts is used to display charts. However, I want the legend to have the same colour as the bullets.
Here is an image as reference:
I want the '0 - 2 sec' to be purple and the '3 - 5 sec' to be orange.
You can use the legend labelFormatter function to accomplish this.
legend: {
labelFormatter: function () {
return '<span style="color:'+this.color+';">'+this.name+'</span>';
}
}
Reference:
http://api.highcharts.com/highcharts#legend.labelFormatter
Example:
http://jsfiddle.net/jlbriggs/mcffqo1x/