Develop Reference

Baidu's echarts - filling up space between 2 lines

I would like to find an approach on how to draw 2 lines in ECharts and fill up the space between them like this:
So that each line has it's own color. Depending on order of lines - area is filled into one color or another (see image).
Is there a native way of doing it? I found that some people are mentioning extensions, but nobody is providing any kind of instructions on how to write them from scratch.. Nor I found any examples on official documentation page. I would appreciate if somebody could point me to correct direction on how to achieve this goal.
In the worst case - I would accept other libraries if they have such very needed option.
The best I could do is this:
var chartOptions = {
xAxis: [{
type: 'value'
}],
yAxis: [{
type: 'value'
}],
series: [{
type: "line",
data: [[0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 2]],
}, {
type: "line",
data: [[0, 2], [1, 3], [2, 4], [3, 8], [4, 5], [5, 0]],
}],
};
var aChart = echarts.init(document.getElementById('aGraph'));
aChart.setOption(chartOptions);

I've used areaStyle to fill the area between the axisLine and the data. I would try to solve this issue by adding the green/yellow areaStyle to the green series, adding a pink areaStyle to the red series, and then adding a white areaStyle to a new series made up from the min values from the other two series. Combined with a lineStyle with a width of 0, you could mostly achieve the look in the sketch, however, the minimum series fill would probably also obscure the interior grid lines.

Irregular time data in highcharts

I encountered a problem when using Irregular time data chart in highcharts to draw a chart. problem as follows:
this is the series array:
series : [
{
name:'test chart'
data:[
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25]
......
]
}
]
If the length of data array of a serie in series array is more than 1000,the chart won't be drawn ,and it shows blank ,but when the length of the data array is less than 1000,the chart shows normally.why? and how to fix it?is it a limitation of highchart for Irregular time data chart ?

Check turbo-threshold property if set ,Highcharts works well even for 1 million points. Share the fiddle with problem
Update : similar question answered already by Highchart Champ sebastian at Highcharts 3 cannot render more than 1000 points in one series
use : http://api.highcharts.com/highcharts#plotOptions.series.turboThreshold
in your series
series: [
{
type: 'scatter',
name: 'some name',
data: something,
turboThreshold: 7000,}
]

Highcharts skip non-provided steps in a series

I have bar chart in high chart. I send it items for x & y. It happened that x-values are numerics. In such case, it assumes that there are missing entries and add the missing entries. I want to force high chart not to include those assumed items. Is that possible without using categories?
http://jsfiddle.net/96bk4661/1/
$(function () {
$('#container').highcharts({
"chart": {
"type": "column"
},
"series": [{
"name": "X-Axis",
"data": [
[1, 77926],
[2, 71245],
[4, 75275],
[5, 78175],
[6, 75369],
[7, 78145],
[8, 77638],
[9, 75706],
[12, 77491]
],
"color": "#1AA4D5"
}]
});
});
This one is different from http://stackoverflow.com/questions/15973457/automatically-join-missing-data-gaps-in-highcharts-js
I don't want the values to be included on the x-axis.

Use highstock and then set ordinal parameter as true.
xAxis:{
ordinal:true
},
Example: http://jsfiddle.net/96bk4661/2/

Seems there's no other way and I am using categories. Thanks #Ondkloss !

Highcharts Bar Chart Without Column

i'm new to highcharts.
I already browse in highcharts example. but, every time I look for the sample, it came with the column bar chart like this :
All I want is like this :
But I dont know how. Maybe you can help me figured it out.
Thank you.

You can simply set x/y pairs for each of points. Then set column.grouping to false: http://jsfiddle.net/27u9zuhj/
plotOptions: {
column: {
grouping: false
}
},
series: [{
name: 'John',
data: [ [0, 5], [1, 3], [2, 4]]
}, {
name: 'Jane',
data: [ [3, 2], [4, 2]]
}]

Highchart, I want to fill between some values(point to point). in areaspline chart

I'm using HighChart.
I want to fill color to part of area for areaspline chart (or any type chart).
Like in this image:
How can I do that?

You need to use two series, first spline and second with area.
series: [{
data: [3, 4, 3]
}, {
type: 'areaspline',
data: [null,null,3, 4, 3, 3, 5, 4]
}]
http://jsfiddle.net/7wSuT/