how to change point style legend to diamond in chart js - javascript

I want to change the point style of my legend to diamond but don't know how to do it. I am attaching the jsfiddle file in the comment.

The pointStyle should be updated to rectRot instead of rect. Please read more about it here
Updated JSFiddle
Edit: For adding a '%' sign at the end of each tooltip label, add a tooltip callback as shown in the following JSFiddle

Related

How to change Dimple js gridlines styles

I want to change the style of Yaxis grid lines to dashlines. Could anyone help me on this. Thanks..
I know this is old but this might help someone looking to change the gridline color.
The example dimplejs website gives does not work as you pointed out.
This is because the stroke attribute will be overridden by the line STYLE.
This is from the dimplejs webpage and does change the stroke but does not display the new color.
myAxis.gridlineShapes.selectAll("line").attr("stroke", "#FF0000");
Change the style instead of the stroke attribute like this.
myAxis.gridlineShapes.selectAll("line").style("stroke", "#FF0000");

Chartjs extended doughnut with text tooltip issue

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';

Highstock - Tooltip doesn't work correctly with Range Selector

I have problem with Tooltip which doesn't reflects chart's data series. It shows 0 value at point where chart shows something different.
This is how it looks:
I've created JSFIDDLE which shows the problem.
To reproduce this you need to move Range selector to point shown on above charts. But be careful, you cannot stretch it. You need to click in the middle of Range Selector, otherwise it will work. If you do this correctly Your cursor will change to two-sided arrow.
And now the question time:
Is it bug in Highstock code or mine?
You can disable datagrouping then your points will be correct.
plotOptions:{
series:{
dataGrouping:{
enabled:false
}
}
},
http://jsfiddle.net/cy96hd4j/2/

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