I want to color yaxis from value x to y with some color,
I used splitArea but is no use to me because is a splitArea is a repeater, repeats color based on given interval.
I want to obtain something similar to Chart.js:
Acceptable Range Highlighting of Background in Chart.js 2.0
echart
yAxis: {
splitArea:{
show:true,
areaStyle:{
color:["rgba(255,0,0,0.7)",'yellow','green','green','green']
}
}
},
Related
Expected:
I want to divide single line into 2 parts based on x axis value.
Example, when x-value is greater than "2016-8" show dashed line as following
Tried with ECharts visualMap, but it only works depending on y-axis value
https://echarts.apache.org/examples/en/editor.html?c=line-aqi
It seems VisualMap can only be used to change the color and/or symbol of the line.
Different colors on the same line using VisualMap on xAxis
If you don't specifically need to get a dashed line and you just want to use VisualMap on xAxis, you should set visualMap-piecewise.dimension to 0 (0 being x and 1 being y in simple [x,y] series).
visualMap: {
dimension: 0,
},
Then you'll need to set your list of pieces depending on the type of xAxis ('time' or 'category'):
'time' : full example
'category' : full example
Dashed line on half the series
If you specifically need to get this :
when x-value is greater than "2016-8" show dashed line as following
You can split your series in 2 different series and affect a different line style to each of them:
Series 1: date <= "2016-8" (solid line)
Series 2: date >= "2016-8" (dashed line)
Here is a working example.
Im newbie in js and anychart
I have anychart chart like this
how can i fill the color based on range like risk matrix.
*Result What i want
This is my code
// create data
var data = [
{x: 2.88, value: 3.12},
{x: 1.9, value: 2.3}
];
// create a chart
var chart = anychart.scatter();
// adjust scale min/max
chart.xScale().minimum(0).maximum(5.0);
chart.yScale().minimum(0).maximum(5.0);
// divide scale by three ticks
chart.xScale().ticks().interval(1.0);
chart.yScale().ticks().interval(1.0);
// create a bubble series and set the data
var series = chart.marker(data);
// enable major grids
chart.xGrid().enabled(true).stroke('0.1 blue');
chart.yGrid().enabled(true).stroke('0.1 blue');
var yAxis = chart.xAxis();
// set the chart title
chart.title("Quadrant-like Scatter Bubble Chart");
// set the container id
chart.container("container").draw();
});```
To get a risk matrix in the result, it’s better to use the Heatmap module.
Heatmap from your screenshot is recreated in this sample here: https://playground.anychart.com/0RAcumgI/3
Did we understand your question correctly?
I am using scatter chart from eCharts scatter. No option in official documentation about any option for setting the start of axises, I need xAxis starts not from 0, but setting some buffer like in picture
.
So bubble should start not from 0 but having some extra buffer, so the bubble should not overlap the xAxis. I tried boundaryGap for both xAxis and yAxis, but still axises start from 0. Any possible workaround for that?
try to use xAxis: { onZero: false }.
On echarts 5.4 it is
https://echarts.apache.org/en/option.html#yAxis.min
for x xAxis: {min: 'dataMin'} or y yAxis: {min: 'dataMin'}
I'm using echarts
this is my chart
this picture shows I lost some of my legends , so,how do I make bigger space for legends, is it possible to set more space for legends? or if it is possible to make my chart smaller how can I do?
I put
var option = {
grid: {
y: 30,
y2: 90,
},
y mean space before chart, y2 - after chart
If I have a data like this:
data: [0,0,0,0,0,0,0,0,0,0,0,0,0]
this serie starts on the middle but I want what starts really close than the bottom line and not in the middle.Please take a look in this jsfidle http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/tickwidth/ but change data by my example data (data: [0,0,0,0,0,0,0,0,0,0,0,0,0]), I test with min but in this scenario with all values in 0 did not work.
Thanks
I solve with min: 0,minRange: 1 in xAxis
I would do this simply by setting the yAxis min and max.
Example:
http://jsfiddle.net/jlbriggs/bKr74/1/
You can move xAxis down using offset property (offset: Number; The distance in pixels from the plot area to the axis line.):
xAxis: {
tickWidth: 10,
offset: -155
},
See example at jsfiddle