I have two simple bar charts in two different elements one beneath the other. I use the default color palette, so the first chart shows the first color. Now i want the second chart to NOT show the first but the third color.
In theory i thought about something like this:
series: [{
data: obj_sumsMonth,
type: 'bar',
itemStyle: {
color: default_palette_color[2]
}
}]
I know that i can define my colors manually, but i would like to prefer to "call" the colors from the palette. Is this possible in echarts?
You can specified colors in option.colors, for instance:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}],
color: "#9ED8F1"
};
As for default_palette_color[2], I couldn't make it work in https://echarts.apache.org/examples/en/editor.html?c=area-basic
Related
Hi,
How can I change the colors of the lines and text in the image bellow.
https://codesandbox.io/s/wy90g2?file=/index.js
option = {
grid:{
show: false
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
};
Thanks
I need to add padding between the symbol and Xaxis,
And code here
markLine: {silent: true,
symbolSize:5,
data: [
{
name : "symbol Bottom",
xAxis : dates[dates.length-3]
symbolSize:30
}]}
enter image description here
You need to add this to the xAxis. Check it out this.
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
padding: 10,
}
},
I want to color the area "under" the graph (i.e. between zero and value) green when positive, and red when negative, on an eCharts line graph.
Like this
We have already done it with a bar graph (below), but now we need to do it with a line graph.
You can achieve this by setting the visualMap property. I have done some hit and trial and achieved the following.
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, -1200, -800, 1330, 1320],
type: 'line',
areaStyle: {}
}],
visualMap: {
left: 'right',
min: 0,
max: 1,
inRange: {
color: ['red', 'green']
},
text: ['>0', '<0'],
calculable: true
},
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
The eCharts documentation doesn't seem to indicate any way to control the amount of spacing between the markLine and its label. Label position only offers "start", "middle", and "end"... Is there any way around this?
The best option label spacing relative to markline is to use the label padding attribute. Padding can be passed in as an array: [top, right, bottom, left]. Use this to control the space between the label and the markline.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
markLine:{
data:[{
xAxis:'Tue',
label:{
distance:30
}
}]
}
}]
};
Use the distance property inside label to adjust the spacing between the markline and the label.
I am trying to achieve something like shown in the picture.
my code is below, in that for "90", and "130", and "110" i want to give separate colors,is there any way (fixed)
The Visual of the expected output
series: [{
name: 'Historic <br/> $850,000' ,
title: 'Historic',
data: [90, 130,110],
pointWidth: 60,
color: '#0066FF'
}]
thanks in advance!
You can initialize each point as an object instead of just a value, and then supply a color attribute. For example (JSFiddle):
series: [{
data: [{ y: 7.0, color: 'orange' }, { y: 6.9, color: 'green' }, { y: 9.5, color: 'blue' }]
}]
Or you can set the series to colorByPoint and use the colors array, for example (JSFiddle):
colors: ['orange', 'green', 'blue'],
series: [{
colorByPoint: true,
data: [7.0, 6.9, 9.5]
}]