how can I set the max width of a div within d3?
I tried
svg.append('div')
.attr('class','chart')
.attr("max-width",div_width)
.attr("height",div_height)
but it doesn't do the trick, however, if I set it in a css style with the class, it works,
div.chart {
margin : 2%;
overflow: auto;
background: rgba(51, 51, 51, 0.3);
max-width: 900px; // this works
}
I need the max width to be dynamic which is why I want to set it within d3.
Thanks for your help
I figured it out, it should be in (style) and as a string
svg.append('div')
.attr('class','chart')
.attr("max-width",div_width)
.attr("height",div_height)
should change to
svg.append('div')
.attr('class','chart')
.style("max-width",div_width+'px')
.attr("height",div_height)
Related
I want a scrollbar for a label when the label more then the chart height. I mentioned in image where I want scrollbar. Actually sometime I have many labels therefore.
As described in the Documentation here:
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/#Making_legend_scrollable
You need to put the Legend into an external div thats inside a wrapper div.
The Div Structure:
<div id="legendwrapper">
<div id="legenddiv"></div>
</div>
Putting the legend in the external div:
var legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
Then you can make it scrollable by styling it like this:
#legenddiv {
width: 150px;
}
#legendwrapper {
max-width: 120px;
overflow-x: none;
overflow-y: auto;
}
A simple way to do this with AMCharts 4
chart.legend = new am4charts.Legend();
chart.legend.position = "right"; // Positionning your legend to the right of the chart
chart.legend.scrollable = true: // Make it scrollable
See a full example as below :
https://codepen.io/team/amcharts/pen/eYmLvoR
How do I specifically set a kendo ui window to a location x, y
Ive tried both .x and .left and .y and .right
Neither of these seem to have any effect and I cant find anything online or in the docs.
Use the position property of the window object:
http://docs.telerik.com/kendo-ui/api/javascript/ui/window#configuration-position
$("#dialog").kendoWindow({
position: {
top: 100, // or "100px"
left: "20%"
}
});
You could achieve this directly via CSS
$("#windowId").closest(".k-window").css({
top: 200,
left: 400
});
I'm trying to fix the graph but the tooltip is not fixed and have strange behavior where the tooltip start to float around the window.
I have tried to put in the nvd3.css the position fixed but didn't work:
.nvtooltip {
**position: fixed;**
background-color: rgba(255,255,255,1.0);
padding: 1px;
border: 1px solid rgba(0,0,0,.2);
z-index: 10000;
font-family: Arial;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Any advice?
Try to use fixedTop option of nv.models.tooltip model. This is inside the interactiveLayer chart option. So, you can set this up like:
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true) //required
...
//shoud be separated
chart.interactiveLayer.tooltip.fixedTop(100) //fixed distance from top
...
})
Here is a demo
Additional tooltip options (from the source):
content = null //HTML contents of the tooltip. If null, the content is generated via the data variable.
data = null // Tooltip data. If data is given in the proper format, a consistent tooltip is generated.
gravity = 'w' //Can be 'n','s','e','w'. Determines how tooltip is positioned.
distance = 50 //Distance to offset tooltip from the mouse location.
snapDistance = 25 //Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)
fixedTop = null //If not null, this fixes the top position of the tooltip.
classes = null //Attaches additional CSS classes to the tooltip DIV that is created.
chartContainer = null //Parent DIV, of the SVG Container that holds the chart.
tooltipElem = null //actual DOM element representing the tooltip.
position = {left: null, top: null} //Relative position of the tooltip inside chartContainer.
enabled = true //True -> tooltips are rendered. False -> don't render tooltips.
I want to ask if there is some way to force Dropzone to use the dimension (dimension ratio) for preview, based on the uploaded image rather then specifying them in Dropzone config.
I want to display the preview of the image in the same dimensions ratio as the original, but smaller.
Thanks
Jan
You should redefine the css styles below :
.dropzone .dz-preview .dz-details, .dropzone-previews .dz-preview .dz-details {
width: auto !important;
height: auto !important;
}
.dz-details img {
width: auto !important;
height: auto !important;
position: relative !important;
}
I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)
I was using jquery .animate() but its just too choppy for my liking...
I know I can use the :
-webkit-transform: scale(2);
But I want it to be set to a specific size.. not just double or triple the image size.
Any help?
Thanks
You're looking for the -webkit-transition property for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.
In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-property for the properties you want transitioned, and -webkit-transition-duration for the duration:
div {
height: 200px;
width: 200px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
div:hover {
width: 500px;
height: 500px;
-webkit-transition-property: height, width;
-webkit-transition-duration: 1s;
-moz-transition-property: height, width;
-moz-transition-duration: 1s;
transition-property: height, width;
transition-duration: 1s;
background: red;
}
Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.
However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.