I'm having an issue with Highcharts which is not actually the framework's fault, but rather mine. The data I want to plot may have gaps sometimes in the middle of it, and when trying to plot the points the framework doesn't consider the density of the points and link the gaps when, in my case, it's not supposed to. As you can see in the image below the purple serie wasn't supposed to be linked, but rather leave a gap around 16:00 and 08:00.
One other problem that I face because of the gaps I have is that my chart is many times unproportional like in the image shown below where November takes 1/4 of the chart area, while the other months take the rest of the space. Also between August and September the space is larger than the other monthly intervals.
Last but not least there's finally the issue that I set my chart's X Axis accordingly to a date picker I have on my webpage and I'd love it to start and end at the dates picked, but it instead starts and ends at where the points start and end. I'm setting my limits like this:
xAxis: {
type: 'datetime',
min: min,
max: max,
minRange: $scope.minRange || Time.MINUTE,
events: {
afterSetExtremes: onLazyLoad
}
}
You can see the gap linking points problem over here
The unproportional chart problem here
Related
normally I would have some full-blwn code to post with my questions but this is a very generic question... I have create a chart with two y-axis on echarts through yAxis: [{name:'abc', type:'value'},{name:'xyz',type:'value'}]. both axes might have data that goes to negative, but the second axis doesn't always have negative numbers. I would like both axes' 0 value line to align at the same level at all times. As the range of both axes individually might vary greatly depending on the dataset supplied, I wouldn't want to manually set the ranges for them and would like to rely on echarts built-in capability to decide on an appropriate range as long as the zero line is aligned. is this possible at all? thanks in advance
I'm using chart.js and have a chart with 2 line series and 2 bar series. The series can have irregular times, aka, there may be a missing interval or two in a series.
As far as plotting, it actually looks fine. But the tooltip will display the data for the next point that is populated, even if its missing for that period.
In other words, 3 of the series have a point for Jan, but the fourth series' first point is for February. It'll show the first 3 correct for January, and the fourth point on the January tooltip will be for February. Then on February, it'll show all four series February data correctly. I would expect the Jan tooltip to only show the 3 series that it has data for.
tooltips: {
mode: 'index',
intersect: false
}
I am working on a fiddle, but unfortunately I'm having trouble getting that to work (like, display at all). I will update the question once its working.
I've also tried mode being x, and label.
Here is the fiddle. Hover over the first data point and you will see the values for the two "you" series:
https://jsfiddle.net/kqofb5m2/3/
I'm currently trying to combine an area chart with a column chart using HighCharts. However, when I select different ranges for the chart, the column chart cannot start from the leftmost and end on the rightmost. Please see the below pics.
It looks like we have some similar questions here, but none of them works for my case.
current_correct for 6 months
need_wrong for 7 days
The closest solution I can find is
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
with above
But this one only makes points without changing the coordinates on the x-axis. For example, the leftmost column in the above pic is 14.Sep but it does not at the right position.
Thanks for any help!
EDIT: It is very weird since I found that it has a smaller gap in each Monday and a larger gap in others weekday.... As the below pic.
weird case
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:
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.