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
Related
Here is the Stackblitz Demo of the issue
Preview link (for better visibility): https://highcharts-angular-stock-a1hvg5.stackblitz.io/
Issue is : The last plot that is visible on the right most edge of the chart is of 12/27/2021
This is wrong as the the series data is available till 12/30/2021 and that should be visible on the right most edge instead of 12/27/2021. It however works when we zoom in slider to 1 year period
How can I make the original chart also display data till 12/30/2021 (series maximum)?
This behaviour is caused by the data-gropuing feature. You can disable the feature:
"plotOptions": {
"area": {
...,
dataGrouping: {
enabled: false
}
}
}
or control anchor behaviour:
"plotOptions": {
"area": {
...,
dataGrouping: {
anchor: 'end',
lastAnchor: 'end'
}
}
}
Live demo: https://stackblitz.com/edit/highcharts-angular-stock-mpcl1d
API Reference: https://api.highcharts.com/highstock/series.line.dataGrouping
Docs: https://www.highcharts.com/docs/stock/data-grouping
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 implementing a data visualization feature in a self design WEB application by using Highcharts, but now I'm facing a problem, that is I can not add title of axis on my chart, I've survey and tried, but it still doesn't working.
The following is my web of that, and the original source.
WEB:http://140.138.152.9/test3D.html
Original source: http://www.highcharts.com/demo/3d-scatter-draggable
You can add title to xAxis and yAxis in this way.
yAxis: {
title: {
text:'here is Y Axis title',
}
},
xAxis: {
title: {
text:'here is X Axis title',
}
}
Here is the fiddle
I found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I have a license for highcharts and I would like to create a char like the one bellow:
The most similar component on highcharts is the following one:
Does someone know is is posible to replace the PIE inside for just a percent? or some other good client side javascript librarie to do it?
You can find a demo and the API in the following links.
DEMO http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/
API http://api.highcharts.com/highcharts#chart
Thanks
Check about innerSize.
"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0." reference
Than you can take a look this example which shows how to put the text inside the donut chart.
Hope it help you.
You might try using title as an alternative and rather simple approach.
title: {
text: 'Budget',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
JsFiddle: http://jsfiddle.net/amigoo/zwod86e1/
function(chart4) {
chart4.renderer.text('<span style="word-wrap: break-word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5)
.css({
color: '#4b4b4b',
fontWeight: 'bold',
fontSize: '12px'
})
.add();
}