I have a horizontal bar chart that is too tall for the page (i.e. the user has to scroll down to see the full chart) and there is only 4 bars on the chart.
I can reduce the widths of the bars successfully, by using either barThickness or category and bar percentage. The problem is this does not reduce the overall height of the chart, as it just creates more space between each bar.
How do I reduce the width of the bar AND the overall chart, so the user does not have to scroll?
Thanks
Set the height of the chart canvas element, either by specifying it directly in the canvas tag or by specifying max-height in CSS.
Relevant links:
https://www.chartjs.org/docs/latest/#creating-a-chart
Setting width and height
I managed to fix it, using a suggestion from another post. In the following code snippet, I added the line that set the canvas height:-
$("#dvChart5").html("");
var canvas = document.createElement('canvas');
canvas.height = 100;
$("#dvChart5")[0].appendChild(canvas);
Related
I am trying to create a clustered bar chart in PowerBI Desktop, where only the N "tallest" bars are displayed.
My dataset consists of a small number of rows but a large number of columns.
I have tried the following:
Transform the table in absolute values (since I am interested in bar height, not negative/postive strictly)
Try to apply the "top N" filter on the axis datafield
However, nothing happens. The chart currently looks like this (without applying the transformation of the absolute value): Clustered bar chart
I basically want the same chart, but only display the N tallest bars.
You might have to pivot your table, so you have a "column name" field and a "value" field.
Then you need to use the TOP N on the Legend field, like this:
Filters:
Result:
I'm using 2 Kendo Grids to show some data. One Grid is above followed by 2nd grid
I want to reduce the height of grids
Given the code
.HtmlAttributes(new { style = "height: 350px;" })
It worked but the pagination part remains at the same position
Thanks
The grid has a function called "Height". Just use
.Height(350)
fiddle of where I'm at so far
I'm using chart.js, and I'm trying to create a legend that is inside the chart, and not a separate piece of html. I see a lot of posts about legendCallback, but that seems like it only works if you want the legend to be in an html block, and not a part of your canvas that chart.js renders on.
I need this to be all on the canvas, underneath the "Title" that I've place on the chart myself. The dates are my chart labels, the "Title" is a dataset where only the middle piece of data is set to visible, and the dashed line is my fifth dataset.
I'm preventing the title and dashed line datasets from showing up in the legend with this
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('hide');
}
}
}
Further, I'd like my legends to look more like their lines:
If it's not possible to make custom shapes like that, is there any way to fill the rectangles in the legends, without changing the fill of my data points?
Edit: Sorry for the wonky variable declaration at the top, it's because this script get's transformed into a scirban template.
I have a CListBox with a View of type List. It has only one column that the View of type List splits.
I need to draw a border around each Item .
The column contains a blank icon with size 1 and the text.
How can I draw the box ?
Thanks.
Try adding style LVS_EX_GRIDLINES.
I have a GridView that displays data in up to 30 columns. Sometimes this has the effect that the gridview expand to a width that requre a horizontal scrollbar but not always. The length of the data in the columns also vary and I don't want to set a specific width, it's nice that the grid is small if half of the columns are empty.
The problem is when I enter edit mode, labels gets replaced by textboxes and those take up more width and the whole table resizes itself.
Is there any way I can keep the item template and it's labels without a fixed size but at the same time always make sure the edit template will have the same size.
I was thinking about something like this:
On "enter edit mode event"
EditTemplateTextBox.Width = CurrentItemTemplate.Width;
I was able to keep my GridView from resizing when switched to edit mode (except for the new "Update" and "Cancel" columns that get added) using this CSS:
table input
{
width: 95%;
}
You can use 100% if you want, but 95% gave a little bit of spacing between the cells.
Also, if you have other tables on the page that you don't want to be affected by this, give your GridView a CssClass and replace 'table' with the name of your css class like so:
<asp:GridView ... CssClass="myGridView">
.myGridView input
{
width: 95%;
}