How can I draw a pie chart like this? I'm using VictoryPie and VictoryLabel from library victory-native, but I cannot set label position and background color for each label depending on the data and I cannot set the border white like that.
Is there any library that can resolve this?
I think a version of what you want can be achieved via victor-native just put your data like this:
data: [
{ y: 50, x: '50%'},
{ y: 20, x: '20%'},
{ y: 10, x: '10%'},
{ y: 15, x: '15%'},
{ y: 5, x: '5%'},
],
Check out this medium on piecharts
Related
Iam using Plotly.js https://plotly.com/javascript/. I am trying to develop a chart where I want to add a small image on each ticks on the y axis. For reference please see the image given below.
Notice the small gray discs on y axis (next to the texts "Red", "Green" and "Blue"). I am trying to achieve something like this. However on the reference document, I couldn't find anything that does this.
How can I achieve that?
[UPDATE]
After implementing the answer as suggested by #Ruben, and further making some updates, I get this little tip of the x-axis extended to the left to the negative side (ref. the screenshot of this extended tip below)
If it's really only about the dots, I've hacked together something that inserts this unicode shape as a solid, black circle at every bar using annotations. Then you can colour it if you want.
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
var layout = {
annotations: data[0].y.map((v, i) => ({
x: -0.75,
y: i,
xref: 'x',
yref: 'y',
text: "⬤",
showarrow: false,
font: {
size: 14,
color: ['red', 'blue', 'green'][i % 3]
}
}))
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>
Edit: now using changed labels:
var data = [{
type: 'bar',
x: [20, 14, 23],
y: ['giraffes', 'orangutans', 'monkeys'],
orientation: 'h'
}];
data[0].y = data[0].y.map((v, i) => {
const color = ['red', 'blue', 'green'][i % 3];
return `${v} <span style="color: ${color};">⬤</span>`
})
var layout = {
xaxis: {
showline: true,
},
margin: {
l: 100,
}
};
Plotly.newPlot('myDiv', data, layout);
<script src='https://cdn.plot.ly/plotly-latest.js'></script>
<div id='myDiv'></div>
I want to achiev that the setp size of the xaxis depends on the actual value from the label. Here an example of excel how I expect my chart.js line chart should look the step on the x-axis is "2":
But my chart.js always distributes the labels equally on the xaxis:
My xaxis settings:
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Test'
},
ticks:
{
min: 1,
max:17,
stepSize: 5,
},
distribution: 'linear',
}],
Here a link to my chart.js example: https://jsfiddle.net/h97remq3/1/
I tried the whole afternoon different x-axis settings but never get my desired result like in excel. I think the solution should be an easy setting, but I didn't find it...
Instead of using line chart, use a 'scatter' chart. Then omit data.labels and define the data in point format as follows.
data: [
{ x: 1, y: 10 },
{ x: 2, y: 2 },
{ x: 3, y: 5 },
{ x: 5, y: 22 },
{ x: 10, y: 17 },
{ x: 15, y: 11 },
{ x: 17, y: 3 }
],
Please have a look at your amended JSFiddle.
I am using node to create a PDF. I am trying to make a header that looks similar to this:
The white part is the logo, and the background is blue-ish. So far I only have the background using canvas (actually a rectangle), but I can't seem to fit an image on top of it.
I tried to define the header like this:
header: { canvas: [
{ image: `PATH_TO_LOGO`,
width: 100, },
{
type: 'rect',
x: 0,
y: 0,
w: 850, // landscape
h: 120,
color: '#0067B9',
},
],
},
But the logo doesn't show. I looked at documentation, but haven't had much luck. Is this even the correct approach?
You need to add margin to your image. Try something like this:
header: [
{
canvas: [
{
type: 'rect',
x: 0,
y: 0,
w: 850, // landscape
h: 120,
color: '#0067B9'
}
]
},
{
image: `PATH_TO_LOGO`,
width: 100,
margin: [0, -120, 0, 0] // -120 is your rect height
},
]
I'm using matter.js and I have vertex data for objects with absolute positions (from SVG files). When I try to place them on the map, they all end up positioned around 0, 0. This is easily observable with this code snippet:
<body>
<script src="matter-0.8.0.js"></script>
<script>
var engine = Matter.Engine.create(document.body);
var object = Matter.Body.create(
{
vertices: [ { x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 } ],
isStatic: true
});
Matter.World.add(engine.world, [object]);
Matter.Engine.run(engine);
</script>
</body>
Or just look at this jsfiddle: https://jsfiddle.net/vr213z4u/
How is this positioning supposed to work? Do I need to normalize the absolute position data into relative positions and use the position attribute of the options sent to Matter.Object.create? I tried that, but all objects got a little displaced, probably due to my lack of understanding.
Update/clarification:
My goal is that the vertices of the created object end up on exactly on the coordinates they have in the source data.
At body creation the vertices are re-orientated about their center of mass and then translated to the given body.position. As you've not passed a position vector here this just defaults to (0, 0).
Try something like this:
var body = Matter.Body.create({
position: { x: 500, y: 500 },
vertices: [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }],
isStatic: true
});
If you want the position to be absolute:
var vertices = [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }];
var body = Matter.Body.create({
position: Matter.Vertices.centre(vertices),
vertices: vertices,
isStatic: true
});
I have a tornado chart created using bar-charts form Highcharts. I have set a threshold value and on either side of which there are low and high bars.
Now I need to make the threshold line visible. I also have a problem of labels getting overlapped when high, low and base values are equal.
JSFiddle Link: http://jsfiddle.net/xe7qL156/
Please help me to solve it. Thanks.
series: [{
threshold: 29.5,
name: 'Low',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 12.15,
}, {
x: 1,
y: 15.45,
}, {
x: 2,
y: 31.25,
}, {
x: 3,
y: 12.15,
}],
labels: [10, 5, 1, 2]
}, {
threshold: 29.5,
name: 'High',
grouping: false,
type: 'bar',
data: [{
x: 0,
y: 46.86,
}, {
x: 1,
y: 42.28,
}, {
x: 2,
y: 27.77,
}, {
x: 3,
y: 46.86,
}],
labels: [30, 10, 3, 4]
}]
Update: here is a mockup image of what I need
I'm not 100% sure what you want, but I think you want a vertical line overthe bars at the 29.5 position ?
If so, you can do that with another series:
series: [
{type:'line',color:'black',zIndex:505,data:[[0,29.5],[4,29.5]]},
http://jsfiddle.net/fsbqnw7m/
Alternatively, you can use the renderer API to draw a line wherever you want.
http://api.highcharts.com/highcharts#Renderer
Line can be added also as plotLine in particular place.