I'm using some different charts renderer in Highcharts drilldown. In some cases, my first level is a column chart and the second (or third...) level is a pie.
Everything is working well except some specified settings for the axes (title, color/width) that appear in the pie chart. The expected behavior is entire axis are hidden in case of pie chart.
As example, in the following : https://jsfiddle.net/vegaelce/w3crqofu/ I would like the axis lines and titles to be hidden in the pie drilled charts.
When using a pie in the first level by setting the type as for the second level :
type: 'pie',
the axes are correctly hidden.
You can use the drilldown and drillup callbacks to customize your chart options, like:
events: {
drilldown() {
const chart = this;
chart.title.hide()
chart.axes.forEach(axis => axis.update({visible: false}, false, false))
chart.reflow()
},
drillup() {
const chart = this;
chart.title.show()
chart.axes.forEach(axis => axis.update({visible: true}, false, false))
chart.reflow()
}
}
Demo: https://jsfiddle.net/BlackLabel/3ac9hrfj/
API: https://api.highcharts.com/highcharts/yAxis.visible
Related
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
I use reflow = true to make sure my chart fit the width of the container div on resizing the window, so the XAxis will also change.
But when export, different size charts exported as the same size, and the XAxis are not as same as shown.
demo: https://jsfiddle.net/8zb9k5j6/
Is there any way to solve this? Thanks for your help
For example:
Full-screen, my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb)
Full-screen
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's what I want.
Full-screen-export
When I zoom out of the browser, the size of the chart will also decrease, my XAxis is (Dec'21, Jan'22, Feb'22)
small-size
When export as PNG(or whatever), my XAxis is (4.Dec, 20.Dec, 3.Jan, 31.Jan, 14.Feb, 28.Feb), that's not what I want, I want (Dec'21, Jan'22, Feb'22).
small-size-export
The chart export function renders the chart from initial - any changes, like zoom, extremes changes are not applied to the chart config. If you want to apply those changes you will need to add custom logic in the load event, like:
chart: {
events: {
load() {
const chart = this;
if (chart.renderer.forExport) {
console.log('aaply custom changes')
}
}
}
},
Demo: https://jsfiddle.net/BlackLabel/wfua8rye/
API: https://api.highcharts.com/highcharts/chart.events.load
I'm displaying the x-axis of my Highstock chart at the top of the chart area with xAxis: { opposite: true}.
However the tooltip continues to show the x-axis value at the bottom of the chart, see for example here http://jsfiddle.net/ckj7kf2y/
Is there any way I can change the positioning of this be at the top, close to the x-axis?
Bonus points if someone knows why the tooltip.positioner callback isn't called when tooltip: { split: true }
It's possible to wrap core code to add this feature like in this demo: http://jsfiddle.net/ygmbwxtx/
(function(H){
H.wrap(H.Tooltip.prototype, 'renderSplit', function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1));
var tooltip = this,
topAxis = tooltip.options.topAxis,
axisTT = tooltip.tt,
top = tooltip.chart.plotTop;
if (topAxis) {
axisTT.attr({
y: top - axisTT.height,
anchorY: top + 10
});
}
});
}(Highcharts))
and in chart's options:
...
tooltip: {
split: true,
topAxis: true
...
Bonus: positioner is not used for split tooltip - split uses own logic for positioning
I have a column chart, which has category labels Yes, No, Don't Care in xAxis. I also have two buttons which, when clicked, changes to a bar chart or vice versa. See the picture:
However, when changed to bar chart, the labels on yAxis are, from top to bottom, Don't Care, No, Yes. This new order is odd to users. I hope to still keep Yes, No, Don't Care (top to bottom) on the yAxis in the bar chart.
When a button is clicked, I have the following code for changing to bar chart:
var chart = code for find the chart object
chart.inverted = true;
chart.xAxis[0].update({}, false);
chart.yAxis[0].update({}, false);
chart.series[0].update({
type: 'bar'
});
The following code is for changing to column chart:
var chart = code for find the chart object
chart.inverted = false;
chart.xAxis[0].update({}, true);
chart.yAxis[0].update({}, true);
chart.series[0].update({
type: 'column'
});
How can I get the Yes, No. Don't care (top to bottom) order in the bar chart?
Thanks!
See the fiddle here
$("#bar").click( function (){
var chart = $('#container').highcharts();
// Added code to share the fiddle
});
Is it possible to have multiple candlestick series on the same axis and have them grouped next to each other like columns? Right now,they render on top of each other if their y values are similar. I have tried the series options related to this( point padding, grouping ) and they do not work.
Yes, you can add the option "dataGrouping" to the series this way:
serie = {
type: 'candlestick',
name: 'test',
data: seriesdata,
dataGrouping: {
enabled: true
}
}
For further information, check this: http://api.highcharts.com/highstock#plotOptions.series.dataGrouping