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,
}
},
Related
In Apache Echarts, is there a way to rotate the title text of a chart so that it is vertically oriented on one side rather than horizontal on the top? The title at the top sometimes takes important chart real-estate that my series in some cases can overlap. I would like to instruct Echarts when there's a space crunch to move the title off to the left side in a vertical position (like reading titles on the spines of books in a library). There appears to be several "rotate" options for labels, but nothing for titles.
I am not sure you can rotate the main title if you use the default canvas renderer. In this case, you may want to play with the name of your yAxis like this:
const myChart = echarts.init(document.getElementById('main'));
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
name: 'This is my title',
nameLocation: 'center',
nameRotate: 90,
nameGap: 45,
nameTextStyle: {
color: 'black',
fontSize: 18,
fontWeight: 'bold'
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Alternatively, you could use the SVG renderer and add a bit of CSS to transform the main title (which is a <text> element):
const myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
let option = {
title: {
text: 'This is my title'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
myChart.setOption(option);
#main {
width: 100%;
height: 350px;
}
svg g text:last-child {
transform: rotate(-90deg) translateX(-250px);
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
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 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 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