Is there any way to update the font size/color of the dates in the navigator in Highstock?
Based on the documentation, it doesn't have the usual style property. I wanted to decrease the font size of the dates and experiment on the color a bit but HS doesn't seem to have that option.
navigator: {
xAxis: {
labels: {
style: {
color: '#6D869F',
fontWeight: 'bold'
}
}
},
},
Related
I've migrated from Highcharts 6.2.0 to latest (8.1.0 ) and found incompatibility since then.
I noticed that this exists since v7.0.0.
I can't handle the fontSize of YAxis and the label text of the xAxis.
Working scenario v6.2.0
Unworking scenario v7.0.0+
Basically what I do in this example :
yAxis : display font-size as 4px (ugly of course but to be sure we see the difference b/w working and not working)
xAxis : change the text be displaying for example only the first 3 characters of the label. In my real scenario I have a graphic showing flaticons as label and flaticons+text in table (graphic data are based on table to be generated) and so in the export I'd like to see only the text as I got issue with html flaticons to be rendered in the reporting.
Based on highchart's doc, I don't understand what I'm doing wrong....unless doc hasn't been updated and this functionality (to customize our axis) is not gone.
I'm using Chrome/FF and no highchart export server.
Thanks for your help.
Thank you for sharing it.
It seems like a regression. I reported it on the Highcharts Github issue channel.
Please follow this thread here: https://github.com/highcharts/highcharts/issues/13492
If you need a temporary workaround - ask in the comment under the above link. The core developers should respond to you soon after.
EDIT
As a temporary workaround enable these options in the load callback and trigger the axes updates.
Demo: https://jsfiddle.net/BlackLabel/cprbz1ym/
chart: {
type: 'area',
events: {
load() {
if (this.renderer.forExport) {
this.yAxis[0].update({
labels: {
style: {
fontSize: '4px'
}
},
title: {
style: {
fontSize: '4px'
}
}
});
this.xAxis[0].update({
labels: {
style: {
fontSize: '4px'
},
formatter: function() {
return this.value.substring(0, 2);
}
}
})
}
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
I'm trying to have limited number of labels in x-axis. but its not working.
below is my code. Please help me
xAxis: { max : 5,
style: {
fontFamily : "Open Sans",
fontweight: 700 ,
},
},`
The max property is used to set maximum value of the axis. To set limited number of labels and ticks use tickAmount option:
xAxis: {
tickAmount: 5,
style: {
fontFamily: "Open Sans",
fontweight: 700,
}
}
API Reference:
https://api.highcharts.com/highcharts/xAxis.max
https://api.highcharts.com/highcharts/xAxis.tickAmount
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'm wondering if it is possible to place two text titles at each side (negative/positive), centralized on each side.
I tried with this jsfiddle.
...
yAxis: [{
title: {
text: "right",
align: "right"
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
{
title: {
text: "left",
align: "left"
}
}
I tried to add another yxis, but it doesn't work.
you can only set xaxis title to
"low", "middle" by default, "high"
but for multiple title ,i think its not possible via api, it depends on your axis.
like you have one xaxis and 2 yaxis,
so you can have title separatly on both yaxis but not on xaxis.
the problem is you cant get the center point (0,0), if you can get Y of this point then you can update Y for the title.
using HighChart bar chart. aiming for big font labels on the bars
have increased font size in the datalabels.style.fontSize = 50
but labels only show in 2 of the right hand columns!
making font smaller (e.g. 30) it only shows in one bar... weird!
http://jsfiddle.net/py6txbr9/57/
dataLabels: {
enabled: true,
style: {
fontSize: 30,
color: 'white'
}
},
welcome any thoughts if this is happened to anyone else - can't find any bugs or issues else where.
thanks
Defaulty databales are printed "above" column, so when you set white color, there are "invisible". The solution is set "inside" flag as true and verticalAlign as top
dataLabels: {
enabled: true,
verticalAlign:'top',
inside:true,
style: {
fontSize: 30,
color: 'white'
}
},
Example: http://jsfiddle.net/py6txbr9/59/