I have made a chart similar to this (http://www.highcharts.com/demo/bar-basic) using Highcharts, and now I would like to add a marker in the form of a vertical line on each of the bars.
I've been trying to use "scatter" but that only allows me to add one marker per group of bars. Is there any way to change that? Or any other solutions? Thanks!
You have two solutions:
use scatter as you said, but calculate x-position (for example two bar series mean -0.25 and +0.25 to x-category. For example [1.25, 200] to show for second bar in second category.
use column range series with minPointLength set: http://jsfiddle.net/7F4hQ/ and stacks to connect series together
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
columnrange: {
minPointLength: 5,
borderWidth: 0
}
},
series: [{
stack: 1,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
stack: 2,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
stack: 3,
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
stack: 1,
linkedTo: 0,
type: 'columnrange',
name: 'Year 1800',
data: [ [107, 108], [107, 108],[107, 108], [107, 108],[107, 108] ]
}, {
stack: 2,
linkedTo: 1,
type: 'columnrange',
name: 'Year 1900',
data: [ [107, 108], [107, 108],[107, 108], [107, 108],[107, 108] ]
}, {
stack: 3,
linkedTo: 2,
type: 'columnrange',
name: 'Year 2008',
data: [ [10, 11], [107, 108],[107, 108], [107, 108],[107, 108] ]
}]
I think Bullet Chart is what you were looking for. They might have added this feature in later versions. You can add as many bars as you want.
Related
I want to sort by two series data Absolutely in desc, like
[320, 302, 341, 374, 390, 450, 420]
add
[-120, -132, -101, -134, -190, -230, -210]
result in desc sort
[440, 434, 442, 508, 580, 680, 630]
How to do this,
Is echats has some parameter or config to quick achieve this result?Thk~
option = {
legend: {
data: [ 'neg', 'pos']
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: 'pos',
type: 'bar',
stack: 'Total',
label: {
show: true
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'neg',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
I'm creating a chart using Echarts and it looks like this on my page:
This causes me two issues, the first is that it's really bad to see the data in the graph, so I need to make the bars bigger.
The second issue is that the bar labels (on the left) are being cut.
My chart config is similar to this, it only has more data in it:
option = {
xAxis: {
},
yAxis: {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}]
}
the solution was simple.
After messing around with both the echarts docs and the Laravel Charts that I was using, i managed to get what I wanted by setting a height property at my chart config.
Something like this:
option = {
xAxis: {
},
yAxis: {
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
series: [{
name: "Sale",
type: "bar",
data: [5, 20, 36, 10, 10, 20, 4]
}],
height: 2000px
}
echarts: bar chart bars are located left and right of the value on the category axis:
How to tell echarts to start the bar with the value on the category axis? Like this:
To clarify the problem, here ist another example. This is a chart of the hourly sum of precipitation. Every bar should show the sum from the bottom to the top of the hour, the data values are conencted to every bottom of the hour.
as you can see, the bars are not starting at 8:00, they are starting at 7:30.
Data: (timestamps are shown in CET)
series: [
{
name: "Niederschlag",
type: "bar",
data: [[1608534000000, 3], [1608537600000, 5], [1608541200000, 2], [1608544800000, 0], [1608548400000, 1] ],
barWidth: '100%'
}
]
It should look like this:
Start point of bar here doesn't matter, you need align labels to left: https://echarts.apache.org/en/option.html#series-bar.label.align
you need a hidden xAxis like below:
option = {
xAxis: [{
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
show: false
}, {
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
boundaryGap: false,
axisTick: { alignWithLabel: true },
position: 'bottom'
}],
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130,120,210,110,210],
type: 'bar',
barCategoryGap:'20%',
itemStyle: {
},
xAxisIndex: 0,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
You have not provided the complete chart config, so I recommend using this one. Also pay attention on method useUTC and you need to know that "By default, echarts uses local timezone to formate time labels"
So I see this state of Chart by you data with offset -180:
var myChart = echarts.init(document.getElementById('chart'));
var chartData = [
[1608534000000, 3],
[1608537600000, 5],
[1608541200000, 2],
[1608544800000, 0],
[1608548400000, 1],
];
var option = {
tooltip: {},
xAxis: {
type: 'time',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
splitNumber: 24,
},
yAxis: {
type: 'value'
},
series: [{
name: "Niederschlag",
type: "bar",
data: chartData,
barWidth: '100%',
}],
useUTC: false,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 1024px;height:400px;"></div>
I noticed that using
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [ {
type: 'bar',
data: [
{ name: 'Sun', value: 50 },
{ name: 'Sun', value: 80 },
{ name: 'Mon', value: 100 }
]
}]
}
There are two bars with category as 'Sun'. But if I use
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [
['Sun',50],
['Sun',80],
['Mon',100]
]
}]
}
I see only one bar for 'Sun' with both data elements overlapping. Why does it work with array of objects differently? Also, if instead of using inline data, if I use dataset, then both array of arrays and array of objects behave the same where there is only one bar with overlap.
The reason I am looking for clarity on this is, I have a visualMap with a different attribute for color which makes the data repeat. I am trying to figure out if I need to create separate series or use the same series.
In general is bad idea to naming data points the same name. Strange that the data in the first case did not merge... If you need make the group then in the Echarts it's named stack. For the stack you can use the same name and it will be joined into one group.
VisualMap usually the global option and affects all series but you can limit with seriesIndex.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
data: ["Cat1", "Cat2", "Cat3", "Cat4", "Cat5", "Cat6"]
},
visualMap: {
type: 'continuous',
range: [0, 70],
seriesIndex: 2,
color: ['green', 'blue', 'red'],
},
yAxis: {},
series: [{
name: 'Series1',
stack: 'group1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: 'lightgray'
}, {
name: 'Series2',
stack: 'group1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
color: 'gray'
}, {
name: 'Series3',
stack: 'group2',
type: 'bar',
data: [50, 20, 70, 10, 60, 40],
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I am trying to add a visual map according to the y axis in echarts.
Taking one of their example:
https://echarts.apache.org/examples/en/editor.html?c=area-pieces
The results looks as follow:
what I'm trying to achieve is:
Obviously here, I have just rotated the picture by 90 degree.
How can this be achieve in echarts directly (so not by saving the picture first)?
The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:
option = {
backgroundColor: '#fff',
xAxis: {
type: 'value',
boundaryGap: [0, '30%'],
position: 'top'
},
yAxis: {
type: 'category',
boundaryGap: false
},
visualMap: {
type: 'piecewise',
show: false,
dimension: 1,
seriesIndex: 0,
pieces: [{
gt: 1,
lt: 3,
color: 'rgba(0, 180, 0, 0.5)'
}, {
gt: 5,
lt: 7,
color: 'rgba(0, 180, 0, 0.5)'
}]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: 'green',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: {show: false},
data: [
{yAxis: 1},
{yAxis: 3},
{yAxis: 5},
{yAxis: 7}
]
},
areaStyle: {},
data: [
[200, '2019-10-10'],
[400, '2019-10-11'],
[650, '2019-10-12'],
[500, '2019-10-13'],
[250, '2019-10-14'],
[300, '2019-10-15'],
[450, '2019-10-16'],
[300, '2019-10-17'],
[100, '2019-10-18']
]
}
]
};
Result:
See on Imgur