How can I configure Highcharts to push both the chart area + xAxis ticks and labels to make room for the yAxis labels?
Related
HEATMAP
Take a look at the chart attached. I tried to set properties of legend for heatmap but nothing worked. Is there a way I can set this legend height according to chart height. I was able to change heatmap height but not the legend. Also, how can i reverse the legend numbers order in descending order?
this is what I used to display legend when creating chart, but its not showing legend numbers in descending order, neither does it changes the height to cover full map height.
You need to set proper symbolHeight for legend and disable reversed for color-axis.
colorAxis: {
...,
reversed: false
},
legend: {
...,
symbolHeight: 280
}
Live demo: https://jsfiddle.net/BlackLabel/2r0Lbt6d/
API Reference:
https://api.highcharts.com/highcharts/colorAxis
https://api.highcharts.com/highcharts/legend.symbolHeight
My Bubble Chart - https://jsfiddle.net/cm4fortp/
Here in this chart I am showing data of last 3 months. The problem is due to width, Highcharts is wrapping up the x-axis ticks i.e. showing only few x-axis labels. I want to show the label for every first date of month and also on 2-weeks interval.
I have used following formatter to play with x-axis labels but not all indexes are coming here.
xAxis: {
labels: {
formatter: function() {
if(this.value!=-1 && this.value!=0){
console.log(this.value); //to print all the x-axis index
}
}
}
}
I am looking for maybe something that can give me all the x-axis index or can force Highcharts to display all x-axis labels or something horizontal scroll so that I can increase and fix the width of chart to show all labels.
To show as many ticks as you want you can use xAxis.tickPositions - an array defining where the ticks are laid out on the axis.
API reference:
https://api.highcharts.com/highcharts/xAxis.tickPositions
I am trying to update our old chart rendering engine to Highcharts.
How can i draw a chart like this with Highcharts?
example
I think maybe there is some way to combine the polar chart and pie chart but still not find out how to do it.
How about instead of combining polar and pie charts, use only polar chart? I prepared an example for you where I am using four series. The first one has disabled grouping and enableMouseTracking and it is treated as a background. I also modified pointPadding and groupPadding to be able to display series exactly as in the provided image. Take a look at the example below.
API Reference:
https://api.highcharts.com/highcharts/plotOptions.column.grouping
https://api.highcharts.com/highcharts/plotOptions.column.pointPadding
https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
https://api.highcharts.com/highcharts/plotOptions.series.enableMouseTracking
Example:
http://jsfiddle.net/6hjefrcu/
the problem is you are adding the pie chart after the polar chart and the pie got on top of polar so you have 2 solutions
1.- add the pie chart before the polar chart
2.- play with zIndex; set zIndex of polar to 1 and zIndex of pie chart to 0 or in your code just set pie chart zIndex to -1
chartRender.addSeries({
name: 'score-template',
type: 'pie',
slice: false,
pointPlacement: 'between',
data: [
50, 80, 30
],
zIndex: -1
});
http://jsfiddle.net/z3Lr2z54/2/
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
I have a Highcharts chart as follows:-
http://jsfiddle.net/sushengloong/KQNhm/1/
I need to change it such that the bar chart appears right in between the ticks. As you can see from the above link, I tried using pointPlacement: 'between' but some charts are still not displayed in between the two adjacent ticks. On top of that, there are some spacing to the right of every bar chart which make the gap between the bar charts unequal.
In addition, the xAxis tick label should also appear in the middle whereby the two adjacent ticks depict the start and end of the respective month. I can't find an option for this.
In the one xAxis, you cannot have "between" / "o"n option for different series. Only what you can try to do is using two xAxis.
xAxis:[{
//...options
pointPlacement: 'between'
},{
linkedTo:0
pointPlacement: 'on'
}]