Baidu ECharts2 dynamic chart position based on the legend height - height

I'm using Baidu ECharts2 to visualise a dynamic amount of series (up to 100) as a line chart.
The issue I face is the legend overlaps the graph in case if the series are too many.
I spent good 2 hours in searching the documentation and reading, but cannot figure out any way to set the graph position (y/y2 top/height).
It seems the chart consists of different elements (legend, toolbox etc), but none of them seems to be the graph itself.
An example I found showcases a fully responsive way to position pie charts, but this is not applicable in my case:
https://ecomfe.github.io/echarts-examples/public/editor.html?c=doc-example/pie-media
I'd be grateful if someone has more experience with ECharts and can tell me way to move the graph down by y and set a height.
Thank you!


Your best option may be to set the legend type to scroll so it fits on one line.
legends.push({
type: 'scroll',
show: true,
data: myData,
...
});
You may also be able combine Ovilia's and Zain's solutions to move the grid down to leave space for the legend. Unfortunately that would require a way to determine the legend's size before setting the chart's container size.


You can set grid position to make it.
In ECharts 2, you may set grid.y, grid.y2, or grid.height.
In ECharts 3, you may set grid.top, grid.bottom, or grid.height.

Related

How do I stretch the Y axis in chart.js?

I'm looking to product a fairly small-sized comparative line chart where the actual data values aren't significant (the associated data table always accompanies the chart) but the point of the chart is to visually show the daily/weekly trend.
At full size the graph looks nice.
But when the containing div is constrained to shrink the size, the graph Y-scale shrinks much more in proportion than the X-scale.
What I need instead is something that looks like this.
What am I missing? I can't find any options that affect this.

You can set the maintainAspectRatio option to false in the root of the options object

chartjs conditional formatting for line and area

is there a way for chartjs to do conditional formatting for it's line and area fill charts? basically if values are above a certain threshold, turn the line color to red(or another) vs a different color when values are bellow the given threshold. after looking around I found that AmCharts which does exactly that. Problem is I already have so many charts in my project done using chartjs am wondering if there could be a way of doing it in chartjs as well, rather than have AmCharts as additional resource to load.
any help would be appreciated

ChartJS - adding scroll to horizontal legend in Line chart

I am creating project with ChartJs, and I am fetching real time data from the server. Each second, I add extra data point. After some time, there is just too many points on the graph, to the point that you cannot see anything. I would like to know, if there is a way to scroll through the x-variables, and always have set distance between the points? As of know, the distance between points is shrinking, making the graph not readable.
Thanks!

I would like to know, if there is a way to scroll through the
x-variables,
You can use .removeData( ) to remove the (current) first set of points. This would keep only the same number of (latest) points visible on the graph.
...and always have set distance between the points?
Unless you remove points maintain a set distance while adding points would cause the graph width to increase - which is usually not what you want to do.

Google Bar Chart using hAxis.logScale - gridlines appear at regular intervals

I am creating a Google Bar Chart and have an outlier in the data. I would like to use the logscale option to show the data - otherwise, the large data result overwhelms the smaller ones. The logscale works effectively, but I am afraid the users will not notice the fact that it's a logscale, because the gridlines are at regular intervals. If the look hard at the labels on those gridlines, they will realize that the scale is changing, but normally on a logscale chart, the gridlines would start getting closer together (at least on logscale graphing paper).
I've looked through the options and can't find anything that helps. Can I specify the positions of each gridline in the hAxis? Any thoughts?

Google charts API - multiple charts on the same image

Is there a way to display multiple charts on the same image using Google Charts api?
To elaborate:
I have one data series which I want to display as bar chart.
I have another data set which has nothing to do with the first one (well they are correlated but the values are hundred times bigger).
X-axis is for dates.
I want to have second data set displayed as line chart with Y-axis on the left.
I found something similar in "Compound charts" section but as far as I understand markers are calculated based on already displayed data set - and I want to have them independent.
In other words - is it possible to make image like this:
http://chart.apis.google.com/chart?cht=bvg&chm=D,0033FF,1,0,5,1&chs=200x150&chd=t1:30,10,20|60,40,50&chxt=y
but with the line being independent and their values axis being on the right.
I'm sorry I'm not familiar with the terminology - I'm sure there is a name for what I'm trying to achieve.
Thanks!

Only 2 years behind the curve but just to let you know that I have achieved your objective of displaying 2 datasets (one a bar chart, the other a line chart) against 2 different axis scales.
The devil is in the scaling parameter &chds and explicit axis values using &chxr. Essentially, I defined the explicit scales for the x-axis, y-axis and r-axis. and then instructed the scaling parameter to scale each dataset differently.
So for an r dataset between 0 - 10 and a y dataset between 0-2 I would write;
&chds=0,2,0,10 (y then r defined in my axis parameter, i.e. &chxt=y,r)
...and...
&chxr=0,0,2|1,0,10
Let me know if you need more detail!

I've looked into something similar to this before and have used the google chart API a lot. I'm 90% sure the answer is no. Sry :(

Yep it is possible.
Here is an example of two datasets displayed on the same axes. 1 is a bar chart the other is a line graph....
This line - chd=t1:95,1,1,3,10,3,77|95,52,44,24,11,2,1 - allows for the two datasets.
slothistype