I am having an issue with the Nivo responsive bar chart. I have set the "minValue" and the "maxValue" in my chart props per the documentation. The data passed to the chart contains valid in range values of the "minValue" and "maxValue."
When manually specifying "minValue" and "maxValue" the bars overflow on the x-axis and do not display properly.
A little context... I don't want to set the "minValue" and "maxValue" as "auto" because I need to show the floor and ceiling of the possible numbers. Setting it "auto" will cause the chart to automatically calculate the min and the max values based on the lowest and highest number in the dataset. The bars display correctly on the x-axis and don't overflow when using the "auto" setting.
Does anyone know why the bars don't display properly when specifying custom "minValue" and "maxValue"? Any ideas on what might be wrong?
Demo Here
You have to set the clamp value to true in your valueScale property, ie:
<ResponsiveBar
...
valueScale={{
type: 'linear',
min: minVal * 0.8,
max: maxVal * 1.2,
clamp: true
}}
...
/>
Related
I am using Highcharts Stock with an additional xrange series added ad-hoc. The purpose of the xrange is to mark out a particular price in the candlestick chart. The reason for using xrange instead of plotLines, etc is so that I can allow the user to drag/drop the price line, and my understanding is that can only be done using series.
I have been able to successfully add the xrange. However, my issue is that after the xrange is added, it changes the display of the chart by changing the min/max values on the y-axis.
I have included...
yAxis: {
startOnTick: false,
endOnTick: false,
},
... on the chart in order for the y-axis range to be auto-zoomed around the min and max ohlc values in focus. But once the xrange is included, I guess it treats "0" as the min y value in the chart, and this is a problem when visualizing currencies whose price ranges are much greater than 0. When this is the case, the inclusion of the xrange significantly stretches the y-axis, and compresses the candlesticks that I want to remain visible.
I would like to keep the chart's zoom adjusted to the min/max visible ohlc values even after the xrange is added.
I have been reviewing the options for xrange series, as well for as the chart yAxis in the api docs. None of them seem to target this behavior, and I have been messing around with some of their configurations anyways, with no luck.
I know that I can define explicit min/max like this:
yAxis: {
min: 18000,
max: 23000,
tickInterval: 1000
},
But I would like to avoid that, since as mentioned above, I would like it to be dynamic to the visible min/max ohlc values.
jsfiddle showing the issue (click the button to add the xrange): https://jsfiddle.net/gheim/hLo3fr1w/6/
p.s. If anyone has suggestions for a different method of adding a movable price line that may be more manageable than an xrange, I am open to suggestions and would appreciate the input.
Use the method setExtremes builded in the Highcharts axis class to set minimum and maximum of the render the axes.
chart.yAxis[0].setExtremes(21000, 22000);
Demo: https://jsfiddle.net/BlackLabel/km9y3hj0/
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
In below picture,
The date displayed at end of axis line (x-axis) is diff from date displayed at end of data zoom.
Required,
The date should be same, at axis line & data zoom, When no zoom is applied.
The date should be the last value in data that is passed to charts by settings.
Screenshot is taken from official site of echarts.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
Actually, the chart does show data up to 2009/10/18, but since the xAxis ticks aren't equally spaced, there's a small area at the chart's end
Look what happens when I hover over the chart's right end. It does show you 2009/10/18.
Because the axis ticks are alligned from the left, and the chart's axis is dynamic (because of the custom zoom range), it may not always fit perfectly.
You can, however, play a little with the ticks and labels.
For example, when you have 100 datapoints, you can change the tick interval and label from auto to, let's say, 10 (or another whole number divisible by the number of datapoints).
xAxis: [
{
axisTick: {
interval: 10
},
axisLabel: {
interval: 10
},
}
]
I am using Highcharts area graph.
The type of the chart is "datetime".
The X-Axis labels get well adjusted as long as
Either the width of the chart container div is less than 900px
Or the width is not specified for the div
When I set the width of the container of the div more than 900px, either the labels are appended with the dots or get overlapped.
How it can be resolved. Thanks in advance for any suggestion or help.
You can add the tickInterval option to the x-Axis. This option determines the distance between the individual ticks. For example setting it to
tickInterval: 24*3600*1000
which resembles on day in milliseconds yields no overlapping labels for your chart:
https://jsfiddle.net/doc_snyder/mwzd1rc8/1/
You can also use a new option provided below by highcharts if you are comfortable with showing the labels in 2 or more lines and if you do not want rotated labels.
staggerLines: 2
https://jsfiddle.net/bhavinpatel/153eh40z/
I have highchart and which looks like this ;[if i commented out max value of xAxis i see this image below ]
Here is the similar jsfiddle ;
Jsfiddle Link for similar case
I want to push the bars to all the way left side of the chart.
I actually can do it using hard coded json value on max: of xAxis . but my json value depends on year+month+day+hours+min+sec. so when some of the values here are changed , then i have to change the hard coded value to something else so it is not logical .
If there is anyway using a max value dynamically Please help me.
Thanks
Solution is to increase maxPadding, demo.
More info about maxPadding in the API:
Padding of the max value relative to the length of the axis. A padding of 0.05 will make a 100px axis 5px longer. This is useful when you don't want the highest data value to appear on the edge of the plot area. When the axis' max option is set or a max extreme is set using axis.setExtremes(), the maxPadding will be ignored. Defaults to 0.01.
I have the following problem. If no max value is defined Highcharts always adds space at the end of the bar. To illustrate it I've attached a image. The blue area is the div the chart is inside and I want the bars with 100% end on the end of the blue area. I'm aware of it that I can achive this by setting max:1 on the axis but I'm looking for a dynamic approach since when I'm defining max it is fixed and if the maximum value in the Chart is 80% I again end up with unused space.
Thanks Sebastian
You should set max as 100 for yAxis, not 1.
EDIT:
set maxPadding as 0 and endOnTick as true
http://jsfiddle.net/Km8CK/4/
http://api.highcharts.com/highcharts#xAxis.maxPadding
http://api.highcharts.com/highcharts#xAxis.endOnTick
Set your maxPadding to 0, and endOnTick to false.
example: http://jsfiddle.net/Km8CK/6/
maxPadding:0,
endOnTick:false,