Please see the following chart:
http://jsfiddle.net/A9v4R/
I want that the yaxis labels will be where the -90 point, it's relocated because i changed the startangle.
The xaxis now is great for me but i need to change the position of the yaxis.
Please tell me how can i do that.
i tried to do:
yAxis: {
tickPositions: [-40, -35, -30, -25, -20, -15, -10, -5, 0],
labels: {
x: -13,
}
Thanks,
Tal.
Related
I have a simple echart here with a simple horizontal line defined by the yAxis . My question is is there anyway I can confined the length of the line to a point on the xAxis? I want the line to end at '2017-10-18' instead of the end of the graph or '2017-10-20'
I tried specifying both x and y axis at the same time, but doesn't seem to be working. Any help will be appreciated.
You have 2 options :
Markline
series-line.markLine doc
This is what you used in your example, but replace markline data with that :
markLine: {
data: [[
{
coord: [0, 0.901],
},
{
coord: [4, 0.901]
}
]]
}
data is a list of marklines. To declare a line with specific [[x1, y1], [x2,y2]], you'll have to define a list of points within the list of marklines (that's why there are two brackets in a row).
Graphics
graphic.elements-line doc
Otherwise graphics gives more freedom to draw anything on the graph.
graphic: {
elements: [
{
type: 'group',
left: 'center',
top: 'center',
children: [
{
type: 'line',
x: 20,
shape: {
x1: -250,
y1: -100,
x2: 10,
y2: 40,
},
}
]
}
]
}
But x1,y1,x2 and y2 coordinates are in pixel. If you want it to use the series coordinates, you can use convertToPixel()
myChart.convertToPixel({seriesIndex: 0}, [0,0.901])
Result
In red : markline and in black : graphics
Code
How to draw something like the below screenshot in Echarts?
With ECharts, I can easily draw scatter and axes, include zooming and panning features. However, when I need to draw a new layer on top of scatter, things getting messy. I tried using custom series of e-chart, however, its api and documentation is hard to understand, Besides, its zooming function works weird on multiple series.
You can create the circle by adding a customized data item to your scatter series.
Here's a sample option:
option = {
xAxis: {
max: 12
},
yAxis: {
max: 12
},
series: {
type: 'scatter',
symbolSize: 20,
data: [
[6.0, 8.04],
[8.0, 6.95],
[3.5, 8.81],
[5.0, 8.33],
[6.0, 7.24],
[4.0, 4.26],
[8.0, 7.84],
[7.0, 4.82],
[5.0, 5.68],
{
value: [6, 6],
symbolSize: 400,
itemStyle: {
color: 'rgba(1,1,1,0)',
borderColor: '#00f',
borderWidth: 4
}
}
]
}
};
...which should produce this output:
echarts scatter series with enclosing circle
See https://echarts.apache.org/en/option.html#series-scatter.data and scroll down a bit for more information on customized data items.
I would like to create a chart that has dynamic elliptical areas as background.
The background should visualize the risk and can be static but needs to render to different sizes of the chart of course.
Does anybody have an idea on how to achieve this with highcharts?
Thanks for your help. I solved the problem with a radial bBackground color.
chart : {
type: 'spline',
renderTo: chartData,
zoomType: 'x',
plotBackgroundColor: Highcharts.svg ? {
radialGradient: {
cx: 1.0,
cy: 0.0,
r: 1.5
},
stops: [
[0.0, 'rgba(255, 0, 0, 1.0)'],
[0.5, 'rgba(255, 193, 86, 1.0)'],
[1.0, 'rgba(44, 160, 44, 1.0)']
]
} : null
},
The radialGradient starts at 1.0, 0.0 (x, y) which is in the top right corner of the plot area.
I added three color gradient stops: red, yellow, green.
Hope this helps someone having the same problem. :)
Sometimes edge date labels overlap on my chart:
I was trying to add bigger tickPixelInterval, but it doesn't really help me. How can I fix this?
check tickInterval property in highchart api, set some x,y values
>tickInterval : 2,
labels : { y : -15, rotation: -45, align: 'right' }
I am working on graphael Chart for a Bar Graph as below. I am having difficulty in getting x-axis and y-axis for the below code.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder");
//r.barchart(x, y, width, height, values(array), opts);
var barChart = r.barchart(100, 100, 300, 200, [100, 50, 50, 50, 50, 50, 20],
{stacked: true,width: 50,
//It is the Space between the bars and the size will be reduced
"gutter":"150%",
colors: [
"000-#d00-#900",
"000-#f64-#c31",
"000-#fc0-#c90",
"000-#3a3-#070",
"000-#2bc-#089",
"000-#00d-#00a",
"000-#808-#404"
]});
};
</script>
The chart for the above code is as below
Now I want to have x and y axis values which are empty.X and Y scales.
I have tried few techniques which haven't worked out.I added axis: "0 0 1 1" to the options and tried other few workaround but in vain.
Thanks for replying.