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
Related
i have a html file to show some CSV Data in a Chart.
that is working, but the Legend text is black. And it would be great is the Text color could fit to the Line/Axis Color.
I have tried to change it, but all examples look different to the html i have.
So please could you take a look and help me to change the Color?
i put the html and csv to plnkr
<http://plnkr.co/edit/HKgWYInINlVEl5lM?preview>
To change the color of a label (the tag of your legend), simply use
#labelID {
color: red; /* the color you would like to fill the label */
}
In your case, I would add assign an id for each label
var label = document.createElement('label');
label.htmlFor = 'legnd_chk' + idx;
label.id = 'label_legend' + idx;
label.appendChild(document.createTextNode(title));
and add the css for the labels
#label_legend0 {
color: blue;
}
#label_legend1 {
color: red;
}
#label_legend2 {
color: green;
}
#label_legend3 {
color: yellow;
}
See updated plunker here
I have a xychart with labels on the y axis. Every second label is being hidden:
Google suggests that I can set:
valueAxis.autoGridCount = false;
and:
valueAxis.gridCount
to the number of grids required by the data.
...but it doesn't have any effect, autoGridCount seems to be missing in the V4 documentation and there is no mention of it being removed.
How can I programmatically set gridcount?
EDIT: JSFiddle here
As you already figured out you can use axis.renderer.minGridDistance to show all labels:
categoryAxis.renderer.minGridDistance = 0;
To adjust the row height you can use series.columns.template.height to adjust the height of each element. I would suggest to set it to 100% and set a small border to the items:
series.columns.template.stroke = am4core.color('#fff');
series.columns.template.strokeWidth = 1;
series.columns.template.strokeOpacity = 1;
series.columns.template.height = am4core.percent(100);
To adjust the row height I would recommend increasing the chart height in general, because amcharts is trying to display all data in the area you provide. So increasing the height of the chart will cause all rows to have equal height and fill the provided area.
If you have varying data and don't know the number of rows, you can set the height of the chart dynamically according to the length of your data array and use an html scrollbar:
JavaScript:
document.getElementById('chart').style.height = `${chart.data.length * 50}px`;
HTML:
<div class="container">
<div id="chartdiv"></div>
</div>
CSS:
.container {
max-height: 300px;
overflow-y: auto;
}
#chartdiv {
min-height: 200px;
}
Here I created a code pen to show my suggestion.
I need for Fine Uploader to be able to drawThumbnail as a background image or to otherwise create scaled and cropped squares.
Basically, I am trying to reproduce the behavior I used in angularjs / flowjs, which was (more or less):
// I modified flowjs to set the background-image here instead of src with the base64 image.
<div ng-repeat="file in $flow.files" flow-img background-size: 'cover'">
This is the API on how to draw a thumbnail, but it specifically states that it returns a img or canvas. Instead, I'd like it set to the css property background-image.
http://docs.fineuploader.com/branch/master/api/methods.html#drawThumbnail
This solution gets close, but does not achieve the same effect as background-size: cover.
#image {
width: 33%;
padding-top: 33%;
position: relative;
}
#image canvas {
position: absolute;
top: 0;
bottom: 0;
}
...
callbacks: {
onSubmit: function(id, fileName) {
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
$('#image').html(canvas);
this.drawThumbnail(id, canvas, 500, false);
}
Using the UI mode give me exactly the same issue, I can only use it as the src like so:
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
This is my preferred solution...
#image {
width: 33%;
padding-top: 33%;
position: relative;
background-size: cover;
}
...
callbacks: {
onSubmit: function(id, fileName) {
this.drawThumbnail(); // somehow onto the background property of #image
}
Another solution, if widely adapted, would be to use elements as backgrounds (because then I could use the canvas for the #image background), but as of right now this is not a practical solution:
https://developer.mozilla.org/en-US/docs/Web/CSS/element
Another solution would be to watch for changes on the $('#image img').attr('src'). Hide the img element and set the background-image of #image on change. But, that's another ridiculous solution when the encoded image is right there.
If there isn't already a way to do this with fine uploader, why restrict the element of type img? Why not take any element and any attribute? Why not just return the base64 image and let us set it to any attribute?
Thanks in advance.
It sounds like the easiest solution would be to ask Fine Uploader to generate a thumbnail, pass the API method a temporary <img>, grab the src attribute from the <img> and use that to construct the background-image.
For example:
callbacks: {
onSubmit: function(id) {
var tempImg = document.createElement('img'),
self = this;
this.drawThumbnail(id, tempImg, 500).then(function() {
var fileContainerEl = self.getItemByFileId(id);
previewImg = fileContainerEl.getElementsByClassName('previewImg')[0];
previewImg.style['background-image'] = 'url("' + tempImg.src + '")';
});
}
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 am trying to add mouse hover function to my axis ticks.
what i want is to show long ticks full text only on hover else it would be showing only few characters . i am adding a hover event to .jqplot-xaxis-tick .But it doesnot even respond to hover.Please suggest !
.jqplot-xaxis-tick {
top: 0px;
/* initial position untill tick is drawn in proper place */
left: 15px;
/* padding-top: 10px;*/
vertical-align: top;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.jqplot-xaxis-tick :hover{
overflow:visible;
white-space: normal;
width: auto;
position: absolute;
background-color:yellow;
}
The hover is not detecting because of the z-index of the canvas which lies on top of the whole chart. I did the following and now it's shorten the tootip by CSS ellipsis and show the tooltip with full name on hover.
Based on the Gyandeep's answer, the exact JS and CSS I used are,
Javascript:
$('div.jqplot-xaxis-tick').each(function (i, obj) {
$(this).prop('title', ($(this).text()));
$(this).css('z-index', 999); // this is important otherwise mouseover won't trigger.
});
CSS:
.jqplot-xaxis .jqplot-xaxis-tick {
position: absolute;
white-space: pre;
max-width: 92px; // Change it according to your need
overflow: hidden;
text-overflow: ellipsis;
}
The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.
I managed to add a tooltip kindof feature to axis ticks.When I hover upon them it shows a separate box with full text else only 3-4 characters are shown.
The code is something like this
$($('.jqplot-xaxis-tick')[i]).bind('mouseover', function () {
// var m= '-webkit-marquee';
$($('.jqplot-xaxis-tick')[i]).css('white-space','pre-line');
$($('.jqplot-xaxis-tick')[i]).css('overflow','visible');
$($('.jqplot-xaxis-tick')[i]).css('width','auto');
$($('.jqplot-xaxis-tick')[i]).css('position','absolute');
$($('.jqplot-xaxis-tick')[i]).css('background-color','#666666');
$($('.jqplot-xaxis-tick')[i]).css('color','white');
$($('.jqplot-xaxis-tick')[i]).css('top','-45px');
// $($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
// console.log($($('.jqplot-xaxis-tick')[i]).text());
}).bind('mouseout', function () {
//var m= '';
//$($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
$($('.jqplot-xaxis-tick')[i]).css('white-space','nowrap');
$($('.jqplot-xaxis-tick')[i]).css('overflow','hidden');
$($('.jqplot-xaxis-tick')[i]).css('width','50');
$($('.jqplot-xaxis-tick')[i]).css('background-color','');
$($('.jqplot-xaxis-tick')[i]).css('color','grey');
$($('.jqplot-xaxis-tick')[i]).css('top','0px');
});
Here's the solution I'm using to display monthly high and low temperatures. Hovering over the x-axis tick will display an alert with the active month name and temps.
// Set up hover function
$('#monthlyTemps .jqplot-xaxis-tick').hover(function () {
setActiveColumn($(this));
});
// Set active column
function setActiveColumn(sender) {
// Display values
var monthName = sender.text();
var monthIndex = monthNames.indexOf(monthName);
var monthLowTemp = getMonthLowTemp(monthIndex);
var monthHighTemp = getMonthlHighTemp(monthIndex);
alert(monthName + ': ' + monthLowTemp + ' / ' + monthHighTemp);
}
// Get month low temp
function getMonthLowTemp(monthIndex) {
var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-0.jqplot-point-" + monthIndex).text();
return value;
}
// Get month high temp
function getMonthlyHighTemp(monthIndex) {
var value= $("#monthlyTemps .jqplot-point-label.jqplot-series-1.jqplot-point-" + monthIndex).text();
return value;
}
var monthNames = new Array(12);
monthAbbreviations[0] = "Jan";
monthAbbreviations[1] = "Feb";
monthAbbreviations[2] = "Mar";
monthAbbreviations[3] = "Apr";
monthAbbreviations[4] = "May";
monthAbbreviations[5] = "Jun";
monthAbbreviations[6] = "Jul";
monthAbbreviations[7] = "Aug";
monthAbbreviations[8] = "Sep";
monthAbbreviations[9] = "Oct";
monthAbbreviations[10] = "Nov";
monthAbbreviations[11] = "Dec";