In Highstock charts, any gap will always have the same width (it seems the width of the smallest distance between points) regardless of the time interval of the gap, resulting in narrowing of the time/x axis, while this doesn't happen in the "navigation" series.
Is there any easy way to make the chart preserve the spacing of the gap according to its duration, as it already happens in the navigation bar (thus keeping the x axis without narrowing)?
Standard Highstock chart is using ordinal xAxis by default.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.
You can try disabling this parameter by setting xAxis.ordinal to false http://api.highcharts.com/highstock/xAxis.ordinal
xAxis: {
ordinal: false
},
Related
I am developing an application which allows a user to select dynamically queried data which can then be used in Recharts visualizations. There are certain edge cases where the default formatting / rendering within recharts produces an ugly result. For example, if there are many unique values passed to the <XAxis /> component then the chart produced will likely have overlapping text for the ticks.
There does not seem to be any good "render as many ticks as possible, without overlapping" option described in the documentation. These appear to be the only options:
Render all ticks (obviously leads to too many ticks)
<XAxis
dataKey={xAxisField.name}
name={getXAxisLabel(xAxisField, chartType)}
tickFormatter={
getMetaDataType(xAxisField) ===
"DATE"
? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
: tickNumberFormatter
}
allowDataOverflow={false}
ticks={xValues.sort()} // gets all of the values
interval={0} // display all of values, instead of the default 5
angle={-90} // force text to be 90, reading towards the graph
textAnchor="end" // rather than setting "dy={50}" or something
>
Render only the start / end / start & end, which depends (seemingly) entirely on the width of the text, prior to rotation.
<XAxis
dataKey={xAxisField.name}
name={getXAxisLabel(xAxisField, chartType)}
tickFormatter={
getMetaDataType(xAxisField) ===
"DATE"
? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
: tickNumberFormatter
}
allowDataOverflow={false}
ticks={xValues.sort()} // gets all of the values
interval="preserveStart" // ensure that everything can be read, giving preference to the "left"???
angle={-90} // force text to be 90, reading towards the graph
textAnchor="end" // rather than setting "dy={50}" or something
>
Hardcode the number of intervals to ensure a maximum? I'm not sure if this is a viable option since I would need to know how many ticks are truly overlapping. Just seems like a crude approach.
Is it even possible to have Recharts render as many things as possible, even if they are rotated 90 degrees, and then selectively choose what has enough space to display? Is it possible to have the angle property dynamically update based on the length of the tick mark texts?
Here is a list of links, none of which seems to answer these questions:
Recharts Docs
Recharts XAxis Docs
Recharts LineChartAxisInterval Docs
Github Recharts repo
Show all ticks
Vertical Axis Label
Rotated Axis Labels
Rotate tick text
Axis Labels Display Over Data
Axis Labels Look Awful
Last XAxis label not aligned with tick mark when rotated -45 degrees
Prevent hiding of tick labels
Missing ticks on x-axis
Long strings in labels generate overlap in YAxis for horizontal barchart
StackOverflow Posts
Scalable YAxis Label
Display all XAxis ticks
YAxis Ticks don't auto calculate
Set Label Margin
Here's a picture of the problematic rendering I want to clean up:
Also, please note that normally I would prefer to stick to the same library that I have been using, but if another library is better suited for this use-case, I would like to consider switching!
I had the same problem, ended up removing the interval property which set the ticks to be sort-of-dynamic but had only 4 or 5 ticks.
So I set the minTickGap to some negative value. the result was that more ticks appeared on the axis
<XAxis dataKey="date"
angle={45}
dx={15}
dy={20}
minTickGap={-200}
axisLine={false}/>
before
after:
What is the correct way to set the grid parameters for JSXGraph? According to here,
... [default] values have to be overwritten before the initialization of the JSXGraph board.
So, currently I'm trying the following:
JXG.Options.grid.strokeColor = "pink";
JXG.Options.grid.strokeWidth = 14.0;
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true});
which doesn't affect anything.
However, I can create a grid on existing board, but this draws underneath the existing grid for some reason. The board seems to ignore if initialize with grid: false as well, so I can't seem to work around it. Any ideas?
small update
I found that
JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true, grid: true})
draws an additional grid on top of the grid drawn by the axis: true argument. However, the colors for the first grid drawn by the axis:true argument are coupled to the
JXG.Options.axis.ticks.strokeColor
parameter. For odd some reason, this parameter changes both the tick color and and the grid drawn by the axis (which is drawn even in the case of axis: true and grid: false). Here is an example of what I mean.
In JSXGraph there are two type of grid lines:
A grid object which can be displayed with grid:true and whose attributes can be set with JXG.Options.grid. The distance between two grid lines is set with JXG.Options.grid.gridX and JXG.Options.grid.gridY.
The ticks of an axis can stretch infinitely. This is the case for the major ticks of the default axis. One can set the pixel length of the minor and mayor ticks of an axis with
JXG.Options.axis.ticks.majorHeight = 20;
JXG.Options.axis.ticks.minorHeight = 10;
If these attributes have negative values the tick will stretch infinitely and thus will appear as grid line. The default value of JXG.Options.axis.ticks.majorHeight is -1. Minor ticks and major ticks will have the same color.
The lines of the (true) grid will always have the same distance in user coordinates, independent from the zoom level, while the infinite ticks lines will adapt to the zoom level.
If the user choose a high zoom level, the browser may freeze because of the many grid lines.
I have a Gantt chart, and I need to make the duration scale to one day. Currently there's a label for every other day only.
See image below:
The axis chooses granularity and number of labels / grid lines based on available space, so that it does not look crammed.
You can influence it in a number of ways:
1) Set (reduce) minHorizontalGap for your value axis.
This setting defines how much free space there should be between labels. The less the number the more labels the chart will display.
OR
2) Disable autoGridCount and set gridCount manually.
With both approaches you might need to play around with the numbers to find the one that works for your chart setup and available space.
I am creating a candlestick chart with grouped data and would like to be able to show a specific range based on a defined pixel width of each candle regardless of missing data.
plotOptions: {
candlestick: {
pointWidth: 10,
pointPadding:5
}
},
So if the total plotWidth is 700px and each candle is approx 15px and the dataGrouping is 1 minute there would be approx 47 mins in the xAxis.
I would imagine i could caculate and add the missing data/points but is there some way to force the xAxis to display a range and plot whatever data i have automatically?
First of all: you can use or pointPadding or pointWidth, where width has higher priority.
Anyway, you can user ordinal axis (which is default behavior) to remove missing data between points. It means that points will be evenly spaced on a chart. You have only 10 points? Each will take the same amount of space, x-value will have lower priority.
This is example: http://jsfiddle.net/WbynW/
You can observe only 5 points, but each is 10px width, and each has the same distance between next one. Note xAxis labels (1. Jan, 11. Jan etc.)
Flot chart is repeating ticks on right Y axis when:
alignTicksWithAxis:1
I want to align both axes but hide repeated tick values.
http://jsfiddle.net/AUrfY/20/
Is there something in the API i have missed or i have to check thicks before painting and hide duplications.
Set the tickDecimals option to 2 to get reasonable labels for the right y axis (see this updated fiddle).
The label values are not really duplicated, but they are rounded so that they seem so.