Develop Reference

Add an array object to c3 library as a data (c3 - chart library)

I need help with c3.js library,
It's about the input of "data"
Thank in advance!!!
I had an array: Arr = [[1, 2, 3], [4, 5, 6], [7, 8 ,9]]
How can I draw 3 different lines for 3 element of Arr?
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
**Arr**
],
})
And also want to change the tooltip's title, every point has a different content, for example:
when I hover the point: Arr[0][1], its content is [no2]
Arr[0][2], its content is [no3], Arr[1][0], its content is [no4],...

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.

Multiple X-axis values in highcharts

I have a line graph which can drop down in a straight line. e.g. I have a point at (1, 100) then a point at (1,0). However, highcharts (https://www.highcharts.com/) will only display information for one of the points. Is it possible to get it to show information on both points when I hover over each of them?

The default for line type series is findNearestPoint: 'x' https://api.highcharts.com/highcharts/plotOptions.line.findNearestPointBy .
If you change that to findNearestPoint: 'xy', you'll get the behavior you want.
Highcharts.chart('container', {
series: [{
findNearestPointBy:'xy',
data: [
[0, 29.9],
[1, 50],
[1, 71.5],
[3, 106.4]
]
}]
});
http://jsfiddle.net/vt1cep0L/2/

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/