I want to add margin-top styling to level 1 column template in Amcharts v4 TreeMap chart.
I have tried the following code but known of them works.
level0ColumnTemplate.column.marginTop = 30;
level0ColumnTemplate.marginTop = 30;
code Link:
http://jsfiddle.net/t42asecw/3/
It looks like you're trying to create vertical space between treemap columns. Can't do it on the actual series columns.template because those try to occupy as much space as possible. What you can try then, is to put a paddingTop on the column, e.g.:
level1ColumnTemplate.column.paddingTop = 30;
// Don't forget to shift bullet, too
bullet1.dy = 15;
Fork of your code:
http://jsfiddle.net/notacouch/2vrk3e6s/
Or if you want even spacing on all sides, you can increase the strokeWidth, just be sure to increase column.cornerRadius* values as well (if your corners are rounded at all):
level1ColumnTemplate.column.cornerRadius(30, 30, 30, 30)
level1ColumnTemplate.strokeWidth = 30;
Related
So I'm creating a Line Chart with an undetermined number of XYChart.Series'. The xAxis is a CategoryAxis and the yAxis is a NumberAxis. The problem I have is that I need to have an upper bound max of 100 on the yAxis as it represents %. When a series is plotted which hits the top 100, the circle point is clipped by the boundaries of the chart area. See the picture.
MyChart
The same thing does NOT happen with the xAxis natively it seems (because I didn't set an upper bound?) and I'd like to achieve the same effect where it looks like there is an extra tick of padding between the upper bound and the chart's edge, but without a tick label. Setting the upper bound on the yAxis to 105 makes it look like upper bound IS 105, which is not an acceptable workaround.
This is how I instantiate the axes:
this.xAxis = new CategoryAxis();
this.yAxis = new NumberAxis("Percent", 0.0, 100.0, 10.0);
The Line chart is built like so and then added to the parent node which is the center of a BorderLayout:
LineChart<String, Number> lineChart = new LineChart<>(this.xAxis, this.yAxis);
List<XYChart.Series<String, Number>> seriesList = null;
if (seriesMap.containsKey(this.unitNameForChart)) {
seriesList = seriesMap.get(this.unitNameForChart);
}
else {
seriesList = buildTimeStepSeries();
}
lineChart.getData().addAll(seriesList);
...
I've tried adding padding/insets directly to the LineChart and yAxis yet nothing worked out. I'm open for CSS or direct coding solutions.
I'm trying to create a column chart with minimum pixel height columns. This is easy in chartjs (set the minBarLength property), however I can't figure out how to do so in amcharts.
I've tried setting series.column.template.minHeight to no effect. I've also tried setting pixelHeight and height, but also with no luck.
one workaround can be using scrollbar in Y axis like this following:
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.start = 0;
chart.scrollbarY.end = 0.08;
with value Axis
valueAxis.min = 0;
valueAxis.max = 10;
This is not the best solution i agree but you can use it to slightly zoom with the buttons and scale and see
let me know if it works!
I want to put the same legend top center of the chart. Legend items will be dynamic, likes sometimes 2,5 or 9, etc.
So, it should take space dynamically like how it is acting on the bottom.
I tried with inset functionality but it seems this is not looking better like the bottom one.
and there are few more complexity like I want it like a flat, so now if I define step size 3 then maybe, for now, it looks good for 9 items. but when there will be 2 items, it will show as a list!!
Although I solved that problem through the following solution:
// get parent elements
let parentEle = d3.selectAll("#chartID svg");
let childrenEle = parentEle
//Convert selection to selection representing the children
.selectAll(function () { return this.childNodes; })
.filter('g');
// putting legends position on TOP
d3.select(childrenEle._groups[0][2]).attr('transform', 'translate(0, 5)');
you have to keep eye on chart width - height and according to this, you may have to control padding in TOP for the chart.
might be this is not a good solution but it works fine for me :D
I am facing a problem with the Kendo Grid width. I want the grid to stretch to fit the content of the grid. This grid which I am working on is created dynamically, so at times it may have just 2 columns and at times it may have max 5 columns. I don't want the grid to expand and take the whole page for showing just two columns.
To get this working I added the following css
.k-grid table{
display: inline;
}
The problem is that when this style is applied, it completely messes up the column header and column alignment. Does anyone know how to fix this?
Actually this is really simple. But I wasted lot of time cause I did not get the correct source. You just need to implement following things.
Make the grid sortable: false
and use this CSS
#gridId table {
width: auto;
}
But with this you loose the scrolling feature. But you can wrap your kendo grid in another container and implement your own scrolling.
var grid = $("#kendoGridName");
grid.width(400);
Rather than trying to apply some css you could use some jQuery to perform this task. I do something similar in terms of height. So maybe something like this would work for you (I have modified this to do height and width).
function resizeGrid(size) {
if (size === null || size === undefined) {
size = 0.6;
}
var windowHeight = $(window).height();
var windowWidth = $(window).width();
windowHeight = windowHeight * size;
windowWidth = windowWidth * size;
$(".k-grid-content").height(windowHeight)
$(".k-grid).width(windowWidth);
}
so all this function does is scale the grid based on the current window size so for example if you want the grid to take up all the available space ie max height and width you would call resizeGrid(1) if you wanted it smaller say to take 50% of the screen size then you would use reszieGrid(0.5) if no value is used then the function just goes with a default of 60% of the available width/height.
so you could call this after your initialization of the grid and then scale the grid to an appropriate size.
by targeting the kendo css classes it makes this function easier to reuse.
if you need more info let me know.
Is there a way in d3 to not draw overlapping tick labels? For example, if I have a bar chart, but the bars are only 5 pixels wide and the labels are 10 pixels wide, I end up with a cluttered mess. I'm currently working on an implementation to only draw the labels when they do not overlap. I can't find any existing way to do that, but wasn't sure if anyone else had dealt with this problem.
There is no way of doing this automatically in D3. You can set the number of ticks or the tick values explicitly (see the documentation), but you'll have to figure out the respective numbers/values yourself. Another option would be to rotate the labels such that there is less chance of them overlapping.
Alternatively, like suggested in the other answer, you could try using a force layout to place the labels. To clarify, you would use the force layout on the labels only -- this is completely independent of the type of chart. I have done this in this example, which is slightly more relevant than the one linked in the other answer.
Note that if you go with the force layout solution, you don't have to animate the position of the labels. You could simply compute the force layout until it converges and then plot the labels.
I've had a similar problem with multiple (sub-)axis, where the last tick overlaps my vertical axis in some situations (depending on the screen width), so I've just wrote a little function that compares the position of the end of the text label with the position of the next axis. This code is very specific to my use case, but could adapted easily to your needs:
var $svg = $('#svg');
// get the last tick of each of my sub-axis
$('.tick-axis').find('.tick:last-of-type').each(function() {
// get position of the end of this text field
var endOfTextField = $(this).offset().left + $(this).find('text').width();
// get the next vertical axis
var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]');
// there is no axis on the very right, so just use the svg width
var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width();
// hide the ugly ones!
if (endOfTextField > positionOfAxis) {
$(this).attr('class', 'tick hide');
}
});
The ticks with color: aqua are the hidden ones: