How to minimize whitespace around Baidu's echarts - javascript

I'm trying to incorporate Baidu's echarts (which look really good). However, there is a lot of whitespace around the actual graph when one doesn't set a title nor uses their toolbar. Is there a way to have the graph/chart use more of the canvas?
My current solution to add an extra inside the container one and then set it's width and height to be be bigger by the margins I want to remove and the offset it by setting 'top' and 'left' to negative values of the respective margins. Not elegant and more importantly, not robust, but it works for the moment.

In ECharts 4, 5
As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid.
https://echarts.apache.org/en/option.html#grid
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom.
Thanks to the answers above for pointing me in the right direction!
Further, changing the option.legend, as suggested above, had no effect on my chart.

You can use the properties defined on the grid (x, y, x2 and y2).
These properties are mentioned on the documentation: http://echarts.baidu.com/doc/doc-en.html#Grid

In ECharts 3 you can use the options grid.left, grid.top, grid.right and/or grid.bottom. According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).
Documentation: https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.
const option = {
// these are the grid default values
grid: {
top: 60,
bottom: 60,
left: '10%',
right: '10%',
},
// your other options...
}

Adding values to your themes grid object, like so:
var theme = {
grid: {
x: 40,
y: 20,
x2: 40,
y2: 20
}
}

legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
},
In here we can just simply remove the padding of the legend. even though you are not specifying one, it is taking the default values. Unfortunately, eCharts doesn't give flexible option of setting chartArea through options.
In google Charts you can mention it 100% and it'll cover all the available area. I tried the above mentioned work around and could cover a bit more space after that.

in Echart u can make chart/graph with combination of the chart, and thre is too many config for every charts section, like legend, etc... just have look at their api documantation on their web site and Example page (Combinations part)

Related

How to get lightweight-charts to draw session breaks

I'm able to use lightweight-charts to display price and volume just fine. When the data is for multiple days, I want the chart to also show session break vertical lines (like it does in TradingView app). I looked through the Chart Options and API documentation and cannot find how to draw session breaks. Please advice.
Well, while exactly speaking you can not draw a vertical line, but you can substitute that with a histogram series having a data item on each session start. That series should be configured to have 100% height and should be semi-transparent so the candle behind that is not hidden.
The code should look similar to this:
verticalSeries = chart.addHistogramSeries({
priceScaleId: 'vertical',
color: 'rgba(128, 128, 255, 0.25)',
scaleMargins: { top: 0, bottom: 0 }
})
verticalSeries.setData(opens.map(open => ({ time: open, value: 1 })))
As of version 3.8 it is not possible to draw vertical lines on the chart. There are a few feature requests for this on the issues page for the library so it is possible that this may be added as a new feature in an upcoming release.

"Inline" labels in ChartJS

Is it possible to render a chart with "inline" labels between horizontal bars in ChartJS?
You can use chartjs-plugin-datalabels for this which is very useful when displaying labels on data for any type of charts and is highly customizable.
Note that this requires Chart.js 2.7.0 or later.
Use it by including it under the plugins key of your chart options as shown in the following solutions below.
Solution #1.
The configuration below will display your labels on the top center of each bar. See working example.
var options = {
plugins: {
datalabels: {
// use the formatter function to customize the labels displayed
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
align: "top",
anchor: "center",
offset: 25,
padding: -2,
clip: true,
font: {
size: "16",
weight: "bold"
}
}
}
};
However, this is not exactly like the screenshot you provided so,
Solution #2.
Here's one workaround I can suggest to replicate the exact behaviour that you want.
anchor: 'start' and align: -60: that will bring your data label on top, left aligned
make your chart start at zero by setting scale.ticks.beginAtZero to true
offset: 25: distance (in pixels) to pull the label away from the anchor point
padding: function() {}: use a scriptable option to dynamically compute the left padding based on the label approximate size since adding a specific padding will only work if your labels have the same width that doesn't change which is not this case
See working example for a detailed overview of the configurations.
This solution will work but it's definitely not ideal since the
position of these labels may change depending on the label size, bar
thickness, and the size of the chart.

Huge whitespace around plotly chart in bootstrap grid

I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.
I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured out that a part of the problem is that size of the plotly svg-container defaults to 450px in height.
I have created a fiddle showing the huge white space problem.
In my fiddle I have a small commented code block that sets the layout size, but even setting that doesn't really seem to help with removing most of the white space. Also if it becomes too small it starts cropping away some of the chart.
//can adjust size of svg-container
//but doesn't adjust white space
//var layout = {
// height: 350
//}
//Plotly.plot(gd, pieData, layout);
As you might have guessed I would like to make it smaller - remove quite some of the white space, so that the table below doesn't seem so out of place.
You can use the layout functionality. For your fiddle example you could do the following:
var layout = {
height: 230,
width: 100,
margin: {
l: 60,
r: 10,
b: 0,
t: 10,
pad: 4
}
};
Plotly.plot(gd, pieData, layout);
You can play with the margin property values to position your figure properly.
In the layout tag use width and height to set the container.
Use like -
var layout = {
height : 400,
width : 550,
title : 'Demo',
tracetoggle: false
};
Also the white space is there because of the modebar (which is to take graph snap, zoom, move etc), so you can replace the modebar as well and then shrink the svg container.
To hide modebar -
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
To shift the graph to top use inline style in the svg-container div element, though this is not the best way but a hack -
<div id="myDiv" style="margin-top: -50px;"></div>
Hope this helps.
#allStates{
height:300px;
width:300px;
}
I added this to css and it removed whitespace.

Add some gap in between legend and the chart

In my fiddle here, I want to add some gap in between the legends at the top and the chart, so as to look better.
I tried:
d3.select(".nv-linesWrap").style("padding-top","50px");
but it didnt work.
How do I fix this?
jsFiddle
take a look at xTicks attributes in line 102.
.attr('transform', function(d,i,j) { return 'translate (-10, 40) rotate(-90 0,0)' });
There you can translate and rotate your scalevalues.
In your case, just raise the value of the second translate paramater (40->60).
And a tipp:
play around with those attributes, the first rotateparameter to "-45" makes it really better to read, so you dont have to turn your head every time ;)
//EDIT (Wrong solution)
the legendwrap has the same function and an equal behaviour of the translate function.
Just insert following in line 110:
d3.select(".nv-legendWrap")
.style("float", "right")
.attr("transform", "translate(0,-75)");
Maybe you now have to resize your whole SVG Container where the whole chart is placed
//EDIT2 (Improvement)
to resize the whole Chart (or margin-top+25) i used the following way: just put this part after your legendWrap.
d3.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");
You can control the distance of the chart legend from chart as follows:
chart.legend.margin({
top: 0,
bottom: 10,
left: 0,
right: 0
});
Please modify the top / bottom values as required.
Note that by default nvd3 uses following values: {top: 5, right: 0, bottom: 5, left: 0}
For introducing space between individual legends there is no direct way as this is not controlled by CSS property and is hard-coded within nvd3 itself.
In nvd3 legend.js line 120:
seriesWidths.push(nodeTextLength + 128); // 28 is ~ the width of the circle plus some padding
You can increase this 28 value to increase space between legends.

RaphaelJS: Move and scale objects with FreeTransform in limits

I am using the FreeTransform plugin for moving and scaling objects.
I want to limit this moving and scaling to the size of another rect which contains this object. How can I achieve this?
I have provided an example of problem on JSFiddle. (I want the red rect to stay inside the other rect.)
Thank you.
The FreeTransform plugin provides the option to set a boundary:
boundary: { x: x-pos, y: y-post, width: i, height: i},
see the documentation
https://github.com/ElbertF/Raphael.FreeTransform/

Categories