Chartjs extended doughnut with text tooltip issue - javascript

I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move the text on the left and i can't figure how to solve this. I made a fiddle to describe this issue :
http://fiddle.jshell.net/3be5zb0v/
Any ideas on how to fix this ?

Working fiddle - http://fiddle.jshell.net/3be5zb0v/1/
Just add this before your fillText
thechart.textAlign = 'start';

Related

The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular

I have a range slider and bar graph. I am trying to change the color of bar graph using range slider, i am able to successfully change the color of bar graph using slider, but the data of the bar graph is not shown properly. https://stackblitz.com/edit/angular-ivy-wjpkcr
So I found the issue, but you will have to work a little bit on it to be fully functional.
it appears that when you set [datasets]="getBarChartData()" the chart is trying to render but is stuck in a loop because the value of the background color is infinitely changing inside getBarChartData(), note that you have a two way binding in your slider:
<ng5-slider [(value)]='value' [(highValue)]='highValue' [options]='options'>
and you can't rely on that to properly update your chart.
What I did is, I added a valueChange event to the slider and update the chart whenever a value changes in the slider.
<ng5-slider (valueChange)="logValue($event)" [(value)]='value' [(highValue)]='highValue' [options]='options'>
I also added ngOnInit() to properly initialize dataValues
link to demo: link

Overflow with LineWithFocusChart when interpolating nvd3

I have a problem with the LineWithFocusChart. Whenever I use interpolate('cardinal') the graph-line is cut at the border of the graph. How can I add some kind of padding or enable the graph to draw outside its borders?
I found the solution. It is possible with clipEdge set to false:
chart.clipEdge(false)

Alter first vertical grid line in nvd3

I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.

add text to dojo chart (in this case scatter chart)

I want to add custom text to my (scatter) chart. I could netiher find an example nor any other appropriate dojo function for that.
By now I have a tooltip for each point of my scatter chart, but I'd rather like to have a label for it.
Any idea?
Thanks!
You need to upgrade to dojo 1.9.7 at least to use this answer:
First of all, You have to set a new option: "labelStyle: 'outside'". This position the text uppon the circle in case the label width is larger than than the circle.
The next option to use is:
labelFunc: function(value){
return value.text;
}
This function tells the Chart which label to display.
I updated the fiddle example: Updated JSFiddle

Highcharts problems: variable legend height

I have to set the height & width of the Highcharts placeholder. But the data to be displayed is variable. When the series names(long name) come to much more. The lengend height grows too high and hide the chart.
How could I solve this problem? Hoping to get some help.
I faced the same issue as you have mentioned. I was setting chart height and marginBottom property for the chart. I removed the marginBotton property and its working fine. AS your legend grows, the chart canvas area gets adjusted by itself and the legend does not overlap with the plot area
After your chart loads.. put this in your code..
$('.highcharts-legend').attr('transform', 'translate(50,400)')
But It will still move if you resize the browser...
Ill let you know if I figure it out..
As you can see here the release 2.2.4 introduces legend paging.
You can custom it following the reference.
As you add your series to the chart just stop adding them to the legend after a certain point (eg after 5) with the following option:
showInLegend: false
docs: http://www.highcharts.com/ref/#plotOptions-series
demo: http://jsfiddle.net/7Mmee/14/
see this jfiddle link.this is fiddle and highchart links
http://jsfiddle.net/highcharts/B9L2b/
I think this will solve your problem.

Categories