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.
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
Trying to create a chart as show below
Tried to get most of it working fiddle is in
https://jsfiddle.net/BlackLabel/j1pz28y3/
But only axis is the issue. Unable to get multiple axis for different chart and also axis on the left rather than right please help me by pointing to some demo
You need to set yAxis.opposite to false. Your image shows only two axis (first one for the line and flag series, the second one for the column), so here is the example config basing on the image:
yAxis: [{
opposite: false,
height: '60%'
}, {
opposite: false,
top: '65%',
height: '40%',
offset: 0
}],
Demo:
https://jsfiddle.net/BlackLabel/at8Lyod4/
API Reference:
https://api.highcharts.com/highstock/yAxis.opposite
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 need a border around just the chart area and not the whole chart. I can't find what property to set. This is in the Google Visualization API.
The appropriate option is undocumented. You need to set the chartArea.backgroundColor.stroke and chartArea.backgroundColor.strokeWidth options. The stroke option controls the color of the border, and takes any valid HTML color string. The strokeWidth option controls the width of the border, and takes an integer for the width in pixels:
chartArea: {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3
}
}
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.