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.
Related
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],...
I have a chart in which hovering shows all the elements represented by bars, but they are too many and this produces problems such as the appearance of a scrollbar.
I would like to know if there is a way to show only the current bar that is hovering. In the c3.js documentation I see that this property exists to change the content of the tooltip, but I don't know how to get the current bar to which it is hovering.
With this:
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
console.log(d, defaultTitleFormat, defaultValueFormat, color);
return "fds";
}
this is my live code:
var query = [
["x", "Usuarios"],
["Berta Arroyave", 53],
["Rogelio Zuluaga", 52],
["Manrique Perez", 42],
["Justin Vargas", 33],
["Believer qw", 28],
["María Jimenez", 14],
["Nairo Quintan", 12],
["Adriana Cardona", 11],
["Departamento Idio", 9],
["Natalia Benjumea", 7],
["Bibliotecatos", 7],
["Jose Herrera", 7],
["Doralibia", 6],
["Secretaría General ", 6],
["Natalia Ochoa", 6],
["Viviana Cano", 5],
["Erika Valencia", 5],
["Sandra Cañon", 3],
["Lina Constanza Suaza", 3],
["Recepción User", 2],
["Facultad Medicina ", 2],
["Sandra Valencia", 2],
["Luz Sepulveda", 2],
["Heidy Zapata", 2],
["Gabriela García", 2],
["Auxiliar Administrativo", 2],
["Adriana Mejia", 2],
["Administrador", 1],
["Nathaly", 1]
]
c3.generate({
data: {
x: 'x',
columns: query,
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
how can I do it?
https://jsfiddle.net/50uej3at/
I think your problem here is that your data is in the wrong format to what you appear to be aiming for... rather than having one entry per category you've got one category with everything as an entry within it...
If you put this line after your query data definition:
query = d3.transpose(query);
You should get one bar per person and no massive tooltips
https://jsfiddle.net/yta1s9cz/1/
(I also adjusted the axis label rotation to make the labels readable)
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/
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 !
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]]
}]