I am using Apache ECharts to create a line chart with an Y Axis of type "value" and an X Axis of type "time". I am also implementing dataZoom on the X Axis, which is working correctly. The problem is that when I move the dataZoom a bit, this happens:
My data consist of series with actual Date objects for the X axis, like:
Then, I have the following config for the X Axis. As you can see, I have specified a formatter in the Axis to convert dates to strings, which also works correctly.
Finally, my DataZoom config is just:
{ dataZoom: [{}] }
I am setting the same config as other time charts in ECharts official examples, but I am still getting this error. Any ideas?
xAxis: {
axisLabel: {
hideOverlap: true,
}
}
This should solve the overlapping issue.
Related
I'm using chart.js 2.9.4 and the ng2-charts wrapper for Angular. I'm trying to display incoming live data, but have trouble configuring the chart so that the ticks/axis don't stretch beyond the data in the chart. In other words, I want the chart data points to fill the entire width of the chart grid.
StackBlitz showing my issue.
If you keep looking at the chart as data is added, you see that most of the time the ticks stretch beyond the last point in the chart:
The only solution I could come up with is overwriting the max value of the ticks on the x-axis each time new data is added to the chart: options.scales.xAxes[0].ticks.max = x;. Uncomment line 68 in the StackBlitz in order to apply this. This solves my problem but introduces another. Sometimes as data gets added, the last two ticks overlap:
I've tried experimenting with various parameters of the scales and ticks options (bounds,distribution,stepSize,source,autoSkip,autoSkipPadding) with no results. Is there any combination of configuration parameters to solve my issue ?
You may want to add delay at streaming plugin, the config will look something like:
scales: {
x: {
type: 'realtime', // x axis will auto-scroll from right to left
realtime: { // per-axis options
delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line
pause: false, // chart is not paused
ttl: undefined, // data will be automatically deleted as it disappears off the chart
}
},
I have tested this on your code, and it seems to work as expected, you may want to tune some parameters as needed.
I setup a chart: https://jsfiddle.net/hanoncs/t6rkbp1L/3/ and the second yAxis wont scale to percent. Based on what im googling I should be able to do it this way.
I added the alignTicks:false and it doesn't seem to working.
Just add correct y axis index in time serie description
name: 'OT Percent',
yAxis: 1,
...
Current implementation makes Highcharts assume your second timeserie is still in dollars
You can see more about multiple axes here
I am trying to plot a combination chart of a scatter and columnrange.
I am having issues with the scatter plot not showing correctly. The points seem to "stop" at a certain point after zooming in and scrolling.
https://codepen.io/moosejaw/pen/QavGgR?editors=0011
It must be related to the boost module?
I've tried enabling and disabling it.
boost: {
// enabled: false // works
enabled: true // doesn't work
}
I know the boost module can handle the number of points, but I am confused on why their is a scrolling / placement issue.
Thanks for your time.
This issue happens only when the chart is inverted.
It's a bug reported on github: https://github.com/highcharts/highcharts/issues/4608
The workaround here is to create inverted chart manually (which can be done via chart options and preprocessing the data):
Swap x and y values for all points
Set reversed to true for the y axis (when chart is inverted it's set by default: https://api.highcharts.com/highcharts/chart.inverted)
Swap formatting and zoom options for axes
Handle the format of tooltip (tooltip.formatter may be useful)
I am creating a parallel coordinates plot using d3.js, but am struggling to format axis labeling as I would like.
For instance, one of my axes, 'Buffer Concentration', is plotted on a log scale, which I've specified through the dimensions variable, like so.
var dimensions = [
...
{
key: "b.Conc",
description: "Buffer Concentration",
type: types["Number"],
scale: d3.scale.log().domain([.1, 100]).range([innerHeight, 0]),
tickValues: [.1,.2,.4,.6,.8,1,2,4,6,8,10,20,40,60],
tickFormat: d3.format(4,d3.format(",d"))
},
...
];
However, as you can see from the resulting plot below, my attempt to specify which tick labels are shown (through tickValues) and that they be shown as ordinary numbers rather than powers of 10 (through tickFormat) are not working. Additionally, the axis does not span the domain I specified in scale; it should be [0.1, 100], not [0.1, 60].
Why is this?
Code
The data.csv, index.html and style.css files for my plot can be found here. When opening locally, it [only] works in Firefox.
Thanks in advance for any help, and apologies if I'm missing something basic - I'm new to d3.
It seems that you forgot to apply custom ticks and tick values to generated scales in this line: https://gist.github.com/LThorburn/5f2ce7d9328496b5f4c123affee8672f#file-index-html-L189
Not sure, but smth like this should help.
if (d.tickValues) {
renderAxis.tickValues(d.tickValues);
}
if (d.tickFormat) {
renderAxis.tickFormat(d.tickFormat);
}
My data is something like this:
[
{"months": ["2012.10","2012.11"], "score": 0.1048387096775},
{"months": ["2012.11","2013.1" ], "score": 0.1048387096775},
{"months":["2013.1","2013.2"],"score":0.45362903225749995},
{"months":["2013.2","2013.3"],"score":0.4912023460409091},
...
]
The x axis shows the months in the form of 2012.10 & 2012.11; the y axis shows the score accordingly. However, the x axis only has two ticks and the line chart turns into a weird shape.
Here is my code: http://plnkr.co/edit/uX8ctTEJy5lDs7LWY0Pq?p=preview
The problem is that you are using an ordinal scale. Ordinal scales are a map between the domain values to range values. I think that you may want to use an actual date (the end of the first month, for instance) and set the label to have both values. Take a look at the avg.axis.tickFormat documentation.