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. :)
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
I'm working with line-polar eCharts on Angular, and I ran into a problem with areaStyle. I want it to fill the whole area from the line to the outer most circle with the yellow color, but eCharts left out a little bit of empty space. I tried creating a shadowBlur and offsetX, Y it to the blank area, but the color is not the same. Is there a property of areaStyle I'm missing, or is there a library to fix this?
series = [{
coordinateSystem: 'polar',
name: this.legends[1],
type: 'line',
color: '#D9B100',
data: this.datasetCylinder.data,
smooth: true,
showSymbol: false,
lineStyle: {
show: true,
width: 3,
shadowBlur: 10,
shadowColor: 'gold'
},
areaStyle: {
color: 'gold',
origin: 'end',
opacity: 0.1
}
}]
A simple solution would be to add more points in between, but then chart yellow line might not have the correct form. Any suggestion is appreciated.
There is no easy solution but you can try to find it:
Draw the area outside the circle boundaries and then cut the excess with VisualMap.
Cut area in already filled circle by VisualMap with pieces.
Use custom series and draw all with polygons.
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.
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.
I cannot see any examples in the Google Charts API that will demonstrate how I can create a a fill color in the area between two charts. In my case this fill color should fill the area that represents the spread between worst and best outcome.
This is what I want:
This is what I have
Any ideas on how this is could be done (if at all!)?
I was able to come very close to recreating your desired chart by using a stacked AreaChart and some creative thinking. Plug the following code into the Code Playground:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['a', 'b', 'c', 'd'],
['1', 100, 10, 10],
['10', 250, 150, 50],
]);
var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
ac.draw(data, {
isStacked: true,
series: [{color: 'white', lineWidth: 0}, {color: 'purple'}, {color: 'purple', lineWidth: 0}],
legend: {position: 'none'},
});
}
The keys are to have the bottom/first series color be the same as the background of the chart and to have the last/top series not have a line width. Both of these are controlled by the series parameter. The catch is that since the series are stacked, you'll have to subtract the values of the lower series to get the right number. For example, if you want the lowest line at 250, the middle/dark purple line at 400, and the top line at 450, you'd have to use the values 250, 150, and 50.
Never seen it but you might be able to do sth using the "interval" role.