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.
Related
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>
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've got a working combination chart. Line + columns.
The line is at the bottom of the chart because the numbers are low (between 5 - 10%). The columns' numbers are around 80% so they're up to the top of the chart. This is normal behavior.
I know in Excel you can shift or offset this line to the top of the chart so that it sits on top of the columns... Is this possible with Highcharts? How do you do this offset in Highcharts? I looked everywhere in the docs but can't find a solution...
thanks in advance,
Bart
You can use second yAxis, so you will be able to set extremes, which will work as your offset, see: http://jsfiddle.net/3bQne/921/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012', '01/03/2012', '01/04/2012', '01/05/2012', '01/06/2012', '01/07/2012']
},
yAxis: [{
// default options
}, {
opposite: true,
min: 0,
max: 5
}],
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
type: 'line',
data: [4, 4, 4, 4, 4, 4],
yAxis: 1
}]
});
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.