Is it possible in HighchartsJS to set the starting position for negative values, for example 200. So that the chart less than 200 is drawn down. By default position starts from zero.
To change a base level, use series.threshold property.
Example:
plotOptions: {
series: {
threshold: 100
}
},
Demo:
https://jsfiddle.net/BlackLabel/3c9tngod/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.threshold
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 the first chart:
Multiple y-axis with broken y-axis for left-hand-side y-axis only
The left-hand-side y-axis is broken from 1M to 25M, while there is no broken setting for the right-hand-side y-axis. The horizontal lines for the 2 y-axis in the chart area make it a little bit hard to read. It can be improved by setting the broken for the right-hand-side y-axis from 250K to 6.25M like the 2nd chart shows:
Multiple y-axis with broken y-axis for both y-axis
The broken setting is set by user. They cannot preview the result when configuring the settings.
I want to have a chart with the horizontal lines for both hand side overlapped with each other. I can only add the broken setting for right-hand-side y-axis. But I should know the min & max value for all the series used. The min value is default to be 0, but the max value for the series which use left-hand-side y-axis is around 44M, while it is around 13.5M for the right-hand-side y-axis. But the chart shows me 56M for the left-hand-side y-axis, while it is 14M for the right-hand-side y-axis. I cannot predict the max value for the y-axis while generating the chart setting.
Is it possible to add the broken setting for the right-hand-side programmatically? Or is there any other approach?
Is it possible to add the broken setting for the right-hand-side
programmatically? Or is there any other approach?
Yes, adding programmatically calculated breaks seems to be the only way. You can use for example chart's load event where you have access to all the required values.
For example:
chart: {
events: {
load: function() {
const yAxes = this.yAxis;
yAxes[1].update({
breaks: [{
from: 20,
to: 40,
breakSize: 0
}]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/s01box6p/
API Reference:
https://api.highcharts.com/highcharts/chart.events
https://api.highcharts.com/highcharts/yAxis.breaks
I need to keep my chart under specific X and Y axis delimitation but I also need to allow overflow of my bubbles in my bubble chart. I noticed that hovering the bubble make it overflow, isn't it possible to force it permanently in some ways?
There is no default option to set minimum range without setting min or max. It is possible to set min/max to axes is chart's callback when default axis extremes are not small (min) or big (max) enough, but for bubble chart it might cause bubble to be partially cut (not fully visible).
You could add hidden scatter series that will hold min/max by its points, so if bubbles are on the edge chart will adjust itself to fit them.
Example: http://jsfiddle.net/bp54a36z/16/
{
type: 'scatter',
showInLegend: false,
enableMouseTracking: false,
dataLabels: {
enabled: false
},
data: [[0.1,40],[10,-40]],
marker: {
enabled: false
}
}
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/