I am using Chart.JS and pieceLabel at the moment to display information. I find that setting Arc to true allows for me to show my data in an easier to read format however it makes all of the values on the bottom half of the doughnut chart to be 'upside down'. Is there a way to make the values be displayed in the same format as when arc is set to false?
For example my settings are:
pieceLabel: {
render: 'percentage',
precision: 1,
position: 'outside',
arc: true, // this rotates and curves the text in parallel to the circumference
overlap: true,
}
So I have my values in percentage outside of the doughnut chart but again every value faces inward and id like them to act the same as if arc was false.
Thank you
Related
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/
I'm developing a chart without legend or axis. In this chart I'm also drawing via the 2d context and the underlayCallback option.
The Problem I can not resolve is a mysterious white space on the right side of the chart (about 5px).
I modified a jsFiddle to represent the Problem:
http://jsfiddle.net/12magkox/
Dygraph Constructor for removing the legend and the axis:
legend: 'never',
axes: {
x: {drawGrid: true, drawAxis: false},
y: {drawGrid: true, drawAxis: false}
},
Check out the rightGap option. Your estimate of "about" 5px looks to be spot-on!
rightGap
Number of pixels to leave blank at the right edge of the
Dygraph. This makes it easier to highlight the right-most data point.
Type: integer
Default: 5
What is the correct way to set the grid parameters for JSXGraph? According to here,
... [default] values have to be overwritten before the initialization of the JSXGraph board.
So, currently I'm trying the following:
JXG.Options.grid.strokeColor = "pink";
JXG.Options.grid.strokeWidth = 14.0;
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true});
which doesn't affect anything.
However, I can create a grid on existing board, but this draws underneath the existing grid for some reason. The board seems to ignore if initialize with grid: false as well, so I can't seem to work around it. Any ideas?
small update
I found that
JXG.JSXGraph.initBoard('box', {boundingbox: [-5,5,5,-5], axis: true, grid: true})
draws an additional grid on top of the grid drawn by the axis: true argument. However, the colors for the first grid drawn by the axis:true argument are coupled to the
JXG.Options.axis.ticks.strokeColor
parameter. For odd some reason, this parameter changes both the tick color and and the grid drawn by the axis (which is drawn even in the case of axis: true and grid: false). Here is an example of what I mean.
In JSXGraph there are two type of grid lines:
A grid object which can be displayed with grid:true and whose attributes can be set with JXG.Options.grid. The distance between two grid lines is set with JXG.Options.grid.gridX and JXG.Options.grid.gridY.
The ticks of an axis can stretch infinitely. This is the case for the major ticks of the default axis. One can set the pixel length of the minor and mayor ticks of an axis with
JXG.Options.axis.ticks.majorHeight = 20;
JXG.Options.axis.ticks.minorHeight = 10;
If these attributes have negative values the tick will stretch infinitely and thus will appear as grid line. The default value of JXG.Options.axis.ticks.majorHeight is -1. Minor ticks and major ticks will have the same color.
The lines of the (true) grid will always have the same distance in user coordinates, independent from the zoom level, while the infinite ticks lines will adapt to the zoom level.
If the user choose a high zoom level, the browser may freeze because of the many grid lines.
What I would like to do is plot a single series with two y-axes "locked" to the same data -- for instance, °F and °C temperatures (or feet and meters, etc.) that could be read off either axis, but only one set of points would be plotted.
Things I have tried:
1) Create two series, the second with the converted values, and plot on "on top" of the other (in this case, there's a constant conversion value of 1.51):
date,unit1,converted_unit2
2012-03-19,1.598333,3.108333
2012-03-20,1.542083,3.052083
2012-03-21,1.483333,2.993333
Generally works; however, Dygraphs dynamically scales both y-axes independently to be "pretty", and so the two series don't always plot directly on top of each other.
2) Set visibility of the second series to FALSE:
series: { 'converted_unit2': { axis: 'y2' } },
visibility: [true, false]
Doesn't work: Dygraphs defaults to scaling secondary y-axis for invisible series to 0-to-1.
3) OK, keep them both visible, but set the second series to transparent:
series: { 'converted_unit2': { axis: 'y2' } },
colors: ['#000080','rgba(0,0,0,0)']
This almost works -- however it has the side effect that the label for the second series in the dynamic legend is now transparent. And, since the axes are still being independently calculated to be "pretty", they are not exactly aligned -- the secondary y-axis is potentially a few percentage off the first y-axis.
(I also tried setting the second series visibility to FALSE and manually setting the second y-asix using the values obtained from yAxisRange(), which works well, but the second y-axis doesn't respond correctly to zooming the graph.)
Is there a way to easily create two y-axes for a single series which are "locked" together?
Thanks,
-bryan
same problem here ;)
we used to add a second (dependent) axis by using a single data point in a second series (which allowed a second axis) and fixed axis ranges for both axes (the second range calculated from the first range). Second color was set to transparent, second label was hidden ... worked fine until we had to switch to dynamically scaled axis ...
the second series in the dynamic legend is now transparent
hm, you can change this with css (as it's an inline style, you'll have to use !important to override it) or js (remove the inline style or change it).
Yes, an option for a second (dependent) axis would be great!
Jean
Set the stroke width of the second series to 0:
series: {
converted_unit2: {
axis: 'y2',
strokeWidth: 0
},
}
I am trying to hide the X axis of the Shield UI Chart. The chart's type is bar. I tried to use enabled:
axisX:
{
enabled:false,
},
but it doesn't work. I than tried to set the line's thickness to 0, but this is not working either. The line retains a minimum thickness. Any ideas?
As ot the current version Shield UI Chart, depending on the chart type, of course, the X axis cannot be hidden by setting a specified property. However the effect of invisibility can be achieved by setting the axis color to match the plot's color. Or to white in the most cases.