chartist.js: stroke-linecap is extending the stroke beyond the length of the shape in Bar charts - svg

I'm using chartist.js library in our project. I've a requirement where in I have to display rounded corners for bar charts. I tried by applying stroke-linecap:round !important;.But the stroke-linecap CSS property is extending the stroke beyond the length of the shape in bar charts.
But I want the rounded corner painted in the range of the length of the shape.
How can i achieve this? Please help.

Related

Algorithm for resize multi selected elements on the canvas

I have shapes with integer coordinates of width and height. They can be selected and stretched separately, I want to add the function of stretching a group of selected shapes. For example, as in the Figma editor or in VS Studio on a visual canvas, when we select a set of shapes and stretch them and they stretch proportionally with integer coordinates of width and height. Can you tell me how it works? For example, I have a list of 5 shapes with a width and height of 10px, indents from each other in 1px, I have selected them and pull them along the X axis in the positive direction by 8 pixels, which algorithm do I need to use? Here is an example of how it looks in VS when stretching buttons on the canvas.
https://i.stack.imgur.com/mYOAf.gif

Meshlab non-dispersed vertex Coloring

In meshlab, If I select a vertex and color it with red (per vertex color function), the result becomes
Red is too dispersed.
What I want is just : (image below was edited by photoshop):
How can I do it ?
On triangular meshes, when the color is defined in a per-vertex way, the colors are linearly interpolated across each triangle, so the result is precisely the expected one.
If you need just a way of looking at a few vertices, just enable the visualization of selected vertices and select them.
On the other hand, if you just need to reduce the color's spread, refine the mesh so that the underlying triangles are smaller, and the color is interpolated across a smaller area.
You can get something quite similar to your desired behavior.
The color dispersion is due to Gouraud shading. You can disable it clicking in the tab of face render options and change color button from "vertex" to "face" or "user defined"
To render vertex as "balls with color"
Click on the tab of vertex and choose the option Dot Decorator (1)
Change the size of dots with the Point Size Bar (2)
Let the color buttons in "mesh", not "user defined"

Add extra labels to a chart

I'm using Excel 2016 and wanted to know how I can make a chart that represents a spectrum from left to right with labels on both sides, and a marker in the middle. Essentially I want to represent the Myers Briggs Type Indicator.
What I've tried so far is to make a horizontal bar chart with a marker, but I can't seem to get labels to the left and right. How might I be able to achieve this?
You just need to add text boxes from drawing tools and put them on top of the chart. Set their backgrounds to transparent by choosing no fill.

Text in Ellipses JavaFX

I created a custom venn chart for two sets an their intersection in JavaFX.
Now I want to show the number of elements in this sets like in the following picture:
The sets are ellipses and I used masks to give the intersection a different color.
Now I want to show the number with size and position related to the available space so that the numbers are always inside the according area.
The width for the text element is easy to calculate, but I don't know how to get available height for the text elements.
Maybe it could be helpful to have the pixels of the ellipses as path, but I have no idea to how I can get this.
Does anyone know how to implement that?
Edit:
I developed an algorithm to find the size of a rectangle, which fits in the required areas of the ellipses. The text are scaled to the size of the rectangle and it works, but now I have another problem.
I need to center the scaled text in the rectangle an I used a StackPane for that. But I can't position the StackPane in the chart parent. If I set the layoutX and layoutY the bounds in parent are different.
For example: stackPane with text = sp;
sp.setLayoutY(122.1662320906945);
The Result for getBoundsInParent().getMinY() is 97.16622924804688;
How can I set the StackPane position, if I use it in a chart class as chart children?

Which is the best way to plot graph in iphone?

I saw some Core-plot sample. Is there anything equivalent that will do my task easily? I also want to know feasibility with Core-plot in iPhone. (any issues with core-plot)
I want to have multi-colored vertical bar chart. Is it possible to customize Core-plot framework. Using only one barplot can we have multiple segment on it.
Thank you.
Naveen Thunga
To make a stacked bar plot, you need to make multiple plots, one for each segment. On all but the bottom plot, set barBasesVary to YES. The datasource will ask for a third field called CPTBarPlotFieldBarBase which is the base value for the bar. You will have to do the stacking calculations yourself.
The horizontal lines can be drawn using an additional bar plot. Give the bars a short height (tip - base). You can make the width wider than the others if you want--each plot is independent.
The space between the bars depends on several factors. By default, bar widths are specified in data coordinates. For example, if the bar locations are one unit apart, a bar width of 0.5 will make the bar width and the space between the bars equal; a bar width of 0.75 will make the space 1/3 of the bar width. The actual width in pixels depends on the size of the graph and how many bars are visible (determined by the plot range along that axis). If barWidthsAreInViewCoordinates is YES, then bar widths are given in pixels which keeps them the same apparent width as the plot range changes, but the space between them will change with the plot range.

Resources