how to delete empty space on chartJs canvas - javascript

I am trying to create small horizontal bars with chartJS 2.9.4 and it happens that it has a lot of empty space on top and bottom of the bars. Is there a way to get rid of that?
I want to make the entire chart equal to the height of the bars, knowing that the height is static.

Related

Vertical Progress Bar with milestones

I'm trying to make something like this:
I need to be able to pass in how high the bar should fill up (ie the percentage full I'd like it to be).
Vuetify offers lots of horizontal progress bars (seen here https://vuetifyjs.com/en/components/progress-linear/) but I can't find any vertical ones. I was thinking if I could rotate one of the horizontal ones then I could add circles that fill up when each milestone is hit. So is there any way of rotating a horizontal progress bar or is there another simpler solution to this using HTML, CSS and JS?

Fixed width and flexible count of columns with HighCharts / HighStock

I'm using HighStocks and here is little example to show what i mean:
http://goo.gl/m90FGh
I wanna use those columns also for navigation(to click) so i want to have fixed width for them and with disabled grouping. The issue is when i'm trying to resize the chart (e.g. browser window is smaller). If i disable grouping and set fixed width it will create the same count of cols on the screen but those are overlapping each other. I would like to resize chart, keep columns without overlap and set another "zoom/range" in navigation/minichart to display smaller number of columns with the same width. It's about constant width & space between the columns. Is it somehow possible?
UPDATE:
I tried this solution: http://goo.gl/ojmsFN
It works but only if i shrink the screen/browser, not if i try to expand it again. The range stays still the same in this case, i don't know why.
Thanks for any advices!

Center box grid horizontally and vertically with stamp in the middle

The website I am building requires to have grid of images where one image is in the middle no matter how many images there are in the grid. This is in fluid layout and images are supposed to be editable by website admin and only height is fixed.
Image explanation:
I was thinking to use something as Masonry or Packery but those don't provide any centred layout options. What approach would you take to sort this out?
To approach this problem, I would have each row of images be inside of a container. Then you could absolutely position the container based upon calculations to center the "stamp."

d3js: zooming to a display bigger than svg size

I have gone through a lot of examples, but just could not find what I am looking for. I have a chart which has 54 little bar charts in it. I want to implement following zooming features:
1) By default, the chart is displayed in a svg container of size 400x400. On clicking the background of the svg container, the whole chart redraws/pops out itself to a bigger display, say 800x800, but without disturbing the other elements in the html page.
2) Each little bar chart has a separate container for itself in the svg. On clicking the bar chart, just that chart expands/pops out in a bigger display while rest of the chart is still of the same size.
How can these two features be implemented ??
Thanks in advance !
I think what you're describing is a modal div (or dialog) on top of your current page. If so, you'll need two copies of your charts. One is the original (400x400) and the other is the modal popover (800x800). Since the popover is a completely separate SVG, it can be zoomed differently (showing all 54 little bar charts or one bar chart).
Popover
The popover should be clipped so, if you're zooming to show one bar chart, the others will not be visible. You can refine it so when one bar chart is clicked, the popover only draws one bar chart at a time.
The popover can be a simple div with a high z-order or a dialog. Here's a jQuery dialog. There are many.
Click handlers
You also need click handlers on each chart group the the main SVG group. Alternatively, you could have one click handler for all the bar charts and calculate when you are over the background or an individual bar chart.
g.on('click' , function(d){ ...do the zoom... });

Highchart bubble chart causing issue with different number of bubbles it takes different height

Is there any solution that We can provide hight only for the plot area in which I have shown background image.
You can define only height of entire container, not plotarea.

Categories