I have a line chart with a rather large set of items in it and I was wondering if there was a way to trigger the tooltip without having symbols on the lines.
I tried using both triggers (axis,item) but no luck.
It looks a bit weird when symbols (i.e. circles) are displayed which is why I want to hide them.
Has anyone had any similar issues?
Thanks
How about set series.symbolSize to 0 and 'axis' as trigger like below, is this you want?
let echartsObj = echarts.init(document.querySelector('#canvas'));
option = {
tooltip: {
show: true,
trigger: 'axis'
},
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',
symbolSize: 0
}]
};
echartsObj.setOption(option)
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 300px">
</div>
</body>
</html>
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>
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>
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
I am using echarts library for bar charts. I want scrollbar to display outside the canvas. Is there any way I can accomplish this?
Unfortunately, Echarts don't support scrollbar option.
However you can simply achieve this use a wrap DOM.
check this demo:
let echartsObj = echarts.init(document.querySelector('#canvas1'));
option = {
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'
}]
};
echartsObj.setOption(option)
echartsObj = echarts.init(document.querySelector('#canvas2'));
option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
echartsObj.setOption(option)
.echart-wrap {
display: inline-block;
width: 300px;
height: 300px;
overflow: scroll;
border: 1px solid black;
}
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div class="echart-wrap">
<div id="canvas1" style="width: 500px; height: 500px">
</div>
</div>
<div class="echart-wrap">
<div id="canvas2" style="width: 500px; height: 500px">
</div>
</div>
</body>
</html>
I am trying to build an Area Graph using Highcharts library. All of a sudden i see that there is some spacing on the x-axis before my actual data starts. I want to start the graph right from [0,0] axis with appropriate data.
<?php
$data1 = array(3300, 3000, 4300, 4200, 2900, 1900, 1800);
?>
<script type="text/javascript">$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'areachart',
type: 'area'
},
title: {
text: 'People'
},
credits: {
enabled: false
},
xAxis: {
startOnTick: false,
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return this.value;
}
}
},
plotOptions: {
area:{
dataLabels: {
enabled: true
}
}
},
series: [{
data: [<?php foreach($data1 as $da):
echo $da.', ';
endforeach;
?>
]
}]
});
});
</script>
Good news, it is possible... with some caveats.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min:0.5,
max:10.5,
tickInterval:1,
maxPadding:0,
endOnTick:false,
startOnTick:false
}
http://jsfiddle.net/eg9jn/
Here are the important bits:
The min and max are set to be 0.5 "inside" the chart.
start/endOnTick are set to false.
One caveat: This doesn't work when there are only two categories...
This is not possible since you are using categories for the xAxis. Labels and points for categories are always set in the middle of the category. The first and last category therefore have the gap you want to get rid of.
But in this case, it's not a bug, it's a feature.
You could try and modify your xAxis to use a normal axis and use a custom label formatter to display the days instead of numbers.