SVG/JavaScript pie chart with outside labels constrained by container width - javascript

All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.

Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library

Related

Highchart general drawing svg label zoom-in on mouse hover

I have a svg label which i am drawing using highchart general drawing. I want to know is there any way i can give an option for zoom in to that label on mouse hover.
Below is the code for label.
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
It depends on how the rest of your chart is built and what, if any, data live there.
Highcharts has a method to zoom to a specific point, but you need to define what that point is: https://api.highcharts.com/class-reference/Highcharts.Point#zoomTo. You're drawing a label after the chart has been rendered, so it's not part of the chart's data, and therefore, there's no "point" you can zoom to.
Another alternative you could try is triggering the setExtremes() function to update the chart axes and "zoom" in on a particular area of the chart (https://api.highcharts.com/class-reference/Highcharts.Axis%23setExtremes). See the linked fiddle in this Stack Overflow answer: https://stackoverflow.com/a/44875178/2596103. What they did here is use an HTML button that lives outside the chart vs. a rendered label.
You may want to consider annotations (https://api.highcharts.com/highcharts/annotations) and see whether they can get you the zoom feature you're seeking.
I hope this information is helpful.

PLotLines In HighCharts Overlapping || React highCharts || YAxis Interval

I am developing a barchart in React Js using React HighCharts Library. So in some of the case my data interval is not linear(diffrence between min value and max is very large). so the plotlines are overlapping. Sharing the image for reference.
Please help me to solve this i want my label to show clearly.
In this Image i have 2 plot lines valued at 0.66 and some nearby value 0.5 or so.
They are overlapping. Please help to solve this case.
Thanks.
Highcharts doesn't provide any mechanism for handling overlapping plot lines - it has to be done manually.
Plot line labels can be adjusted by using y property:
plotLines: [{
value: 22,
color: 'red',
width: 1,
label: {
text: 'First label',
y: 13
}
}
Live demo: http://jsfiddle.net/BlackLabel/zm5fk3rw/
If you're looking for more dynamic approach place the code responsible for changing the position of labels in chart.events.load callback.
Current y position of label is kept in yAxis.plotLinesAndBands[i].label.alignAttr.y property. yAxis.plotLinesAndBands[i].label is SVGElement so its y position can be changed like this: yAxis.plotLinesAndBands[i].label.attr({y: newValue}).
Starting point for implementing dynamic logic for positioning plot line labels: http://jsfiddle.net/BlackLabel/1vh940kj/
API references:
https://api.highcharts.com/highcharts/yAxis.plotLines.label.y
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Plot line value property works the same as y in points - it reflects the real value and it's normal that plot lines overlap when they have almost the same value.
If you want to change its y position anyway you can use the same approach that I proposed for dynamic positioning of the labels (current y position of the label can be extracted from yAxis.plotLinesAndBands[0].svgElem.d property):
Starting point for implementing dynamic logic for positioning plot lines: http://jsfiddle.net/BlackLabel/t2hxrwp5/

plotly.js - How to fix space between bars in barchart

Is there any configuration layout option to increase the space between the bars in a bar plot in plotly.js ?
I tried increasing the width of the plot but it is expanding the plot as a whole.I need to fix the width of the bar and space between the bars.
Any help would be highly helpful.
It is a setting of layout The key value pair for the layout object to change the gap is bargap. For example given arrays x and y:
Plotly.newPlot('myDiv', [{x:x, y:y, type:'bar'}],{title:'title',xaxis: {title: 'abscissa'},yaxis:{title:'ordinate'},bargap:0});
Will generate a plot with no gap like a histogram.

Bootstrap+HighCharts.js Responsive Image Position in Donut Chart

I need to insert an image inside of a donut chart but when using bootstrap and when it becomes responsive the location of the image gets out of the donut chart. I want the image to be in the center of the donut chart, how can i do this?
Example Code : http://paste.ubuntu.com/16889111/
Your code for chart.renderer.image is using fixed values, not relative:
// Render the image
chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 220, 200, 60, 60)
.add();
I would suggest making your four values (x position of top corner, y position of top corner, image width, and image height) variables that are based on the chart container's current size.
Consider setting values based on $('#chart').height() and $('#chart').width() and test out the chart.redraw() and chart.reflow() functions to make sure the image within your chart gets updated when the viewport changes.
Here's some links in the API documentation that may be helpful to you:
renderer.image(): http://api.highcharts.com/highcharts#Renderer.image
chart.redraw(): http://api.highcharts.com/highcharts#Chart.redraw
chart.reflow(): http://api.highcharts.com/highcharts#Chart.reflow

how to sync height & y-axis baseline of multiple chart in highcharts

I have multiple charts on a page which are supposed to have uniform height & y-axis baseline, so that the user could compare each chart apple-2-apple.
I rotate the x-axis label to 90 degrees so that it would look nicer and won't overlap with each other, but the problem is, label's length is different from chart to chart, this makes highcharts automatically adjust the height and y-axis baseline of the charts.
How can I make the chart's height and y-axis baseline to be fixed for all the charts on the page?
You can use marginBottom to set the bottom margin of the chart:
$('#container').highcharts({
chart: {
marginBottom: 150
}
});
that will ensure that the bottom of the chart will always remain the same size.
here you can see an example with 2 charts side-by-side, one with longer names and the other with shorter names.
http://jsfiddle.net/ktxn7ewx/
Here is the HighCharts API: http://api.highcharts.com/highcharts#chart.marginBottom

Categories

Resources