Develop Reference

Apache ECharts: "time" Axis labels are overlapping when using DataZoom

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.

Display Categories on x-axis for Highcharts spline with x and y data

My data needs to have an x and a y value, because I want to show the x value when the user hovers over the chart.
I only want to show a limited amount of labels on the x-axis though, which is why I am using categories. I keep getting Highcharts error #19 though, because the chart apparently tries to use the x-values provided in the data array.
I've played around with using type: 'datetime', since I am working with timestamps but I can't position the labels properly in this case and want to use categories instead.
I've created a jsfiddle to explain my problem: http://jsfiddle.net/kf6wrj37/
Instead of just the first and last x-value being display, I want my categories array
categories: [
'1453417200000',
'1456873200000',
'1460325600000',
'1463781600000',
'1467237600000',
'1470693600000',
'1474149600000',
'1477605600000',
'1481065200000',
'1484521200000',
'1487977200000'
],
to be displayed as labels on the x-axis.
How should I go about this? Is it even possible to use categories when my chart's data has x and y values?

Highcharts Y-Axis Limits

I am having problems controlling the Y-Axis range of a highcharts graph. It seems like highcharts likes nice round numbers. When my data passes or is close to certain thresholds, the Y-Axis range can expand a lot which effectively compresses all the plot points downward.
Here is a jsfiddle that illustrates the problem I am having:
https://jsfiddle.net/shannonwrege/z8h5eork
The relevant code for this post is this:
chart.yAxis[0].setExtremes(0, max, true, false);
Keep in mind that I don't know what the data will look like in advance, so I must dynamically modify the Y-Axis range. Right now I am using the setExtremes because of other suggestions I've read on stackoverflow.
The maximum y-value of the data in the first two charts is 99. You'll notice that the y-axis is set at 150 in the first chart where the range is automatically calculated and 100 in the second chart where I specifically set the extreme values. The look of the 2nd chart is what I want. So it seems like setExtremes(0,99,true,false) should do the trick, but it actually doesn't.
In the 3rd chart I changed the data so that the maximum y-value of the data is 101, and I called setExtremes(0,101,true,false). You'll note that the y-axis is now back to 150.
Ideally I want the scale of the graph to be capped on the maximum value to limit the about of extra white space. I want to see all of the data, but I don't necessarily care about the y-axis displaying a maximum band that is greater than the max data value. In this case, I would be happy with the y-axis displaying 100 on the axis and some points over but still visible.
Does anyone know how to make this work?

I ended up using the endOnTick parameter to solve this problem. Adding the following line to the yAxis configuration parameters did exactly what I wanted:
endOnTick: false,
Here's the updated Fiddle showing the results.
https://jsfiddle.net/shannonwrege/z8h5eork/3/
All of the charts look pretty good in my opinion (even the one where the yAxis range was auto calculated).

You will need to read the data and then round up to set the idealMax
var chart,
idealMax = 0; // init the max value
// Read the data to find the highest value
for (i=0;i < (options.series[0].data).length; i++ ){
if (options.series[0].data[i][1] > idealMax) {
idealMax = options.series[0].data[i][1];
}
}
// Round the max to the nearest 10
idealMax = Math.round(idealMax / 10) * 10;
options.yAxis.tickPixelInterval = idealMax/10;
Highcharts.chart('container1', options);
chart = $('#container1').highcharts();
chart.yAxis[0].setExtremes(0, idealMax, true, false);
Updated Fiddle

Stockcharts - Adding an offset to avoid drawing points at the edge

Highcharts and stockcharts, they both provide the options to add some padding at the x axis in order to avoid drawing some values on the edge of the plot area (left or right).
According to the doc this is archived by employing the minPadding and maxPadding members of the xAxis property of the configuration object used for constructing the chart... but in practice this is not working for stockcharts. So i wonder how i can achieve this... i leave you with the examples...
var examples
Working example for highcharts
Not Working example for stockcharts
P.D: Using property min for setting the lowest x value also isn't working.

The maxPadding is applied when you not call the setExtremes() method. In the Highstock, we call the setExtremes to set the range on the navigator, as a result padding is ignored.
To achieve your goal, you can define the tickLength parameter and set x param per labels.
yAxis: {
tickWidth: 1,
tickLength: 50,
labels:{
x: 50
}
},
Example:
http://jsfiddle.net/b6a42kz0/
OP Note: See the comments for updated answer.

How can I get the tick values of a '.nice()'ed scale?

I've created a chart in D3 which contains grid lines. I'm placing my gridlines at every tick on my axis using the axis' scale:
y0Scale.ticks()
The problem I'm having is that the value of .ticks() doesn't seem to take into account the face that the scale has had .nice() called. The result of this is that sometimes my chart is missing gridlines at the extents of the axes.
I know I could combine y0Scale.domain[0] and y0Scale.domain[1] with the tick marks I know about, but doesn't always work, as in some cases the .nice() algorithm does more than just adding a tick value on the min and the max of the scale.

You need to call .ticks() after having called .nice() on the scale.