I want to change the display position of the chart y axis value.
In the example chart, the y-axis values are displayed to the right of the entire chart.
But I want to display it on the left rather than on the right.
What to do in this case?
enter link description here
You need to use the opposite property:
yAxis: {
opposite: false
}
Live demo: https://jsfiddle.net/BlackLabel/wx0qdypt/
API Reference: https://api.highcharts.com/highstock/yAxis.opposite
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
I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x
I have a categorical polar chart with 5 axes, and each axis has its own min/max range. I would like to configure both the axis labels and to add ticks to each individual axis.
The axis labels are drawn on the axis line itself, but I'd prefer them to be drawn slightly away from the line
There are no ticks on each axis, and I would like short ticks drawn on each axis line.
I've tried tinkering without success with the gridLine* and tick* y axis properties. Nothing seems to visually change when I do this, so I am guessing I'm barking up the wrong tree. Can I get tickmarks and better label positioning?
Here's a fiddle for this: https://jsfiddle.net/cfarmerga/cgrk96yh/
Use chart.parallelAxes.labels option to set x and y axis labels positions.
Example code:
chart: {
polar: true,
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
labels: {
y: 25,
}
},
}
API Reference:
https://api.highcharts.com/highcharts/chart.parallelAxes.labels
There is no possibility to set ticks for the polar chart from the API options. You will need to draw them using Highcharts.SVGRenderer. Check the similar thread at Highcharts forum: https://www.highcharts.com/forum/viewtopic.php?f=9&t=45661
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
In the stacked bar shown below
the negative values are represented with the reference line on top, this seems to be redundant with the original axis present below, is there a way to actually show only one axis in the place of 0 marker?
You can set a parameter opposite as true.
xAxis:{
opposite:true
},
Example: http://jsfiddle.net/2s85hcbu/
You can also disable gridlines on yAxis
yAxis:{
gridLineWidth:0
},
Example: http://jsfiddle.net/2s85hcbu/1/
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/