Change 'points' on a line chart to donuts using Chart.js - javascript

I'm looking to customize the point on Chart.js's Line Chart a little more. What I would like is to be able to set a 'border-radius' on those points instead of a solid circle. That way, the points would show up more as donuts. (Border with a hollow/white/colored center).
Is there a way of doing this built-in? If not- is there a way to extend the LineChart function to allow this?
The easiest way I was thinking would be able to just set the PointStrokeWidth to some value greater than 1. Obviously that's not an option, but that's closer to what I'm looking for.
If possible, I would like to be able to customize 'all' of the line widths, instead of having lines all be 1px.

Ah, I seem to have overlooked the option in the documentation. For future readers:
pointDotStrokeWidth: 1 will set the points. There is also datasetStrokeWidth: 2. Also, strokeColor: '#fff' actually uses Canvas' strokeStyle method, so you can use gradients and such to style those, if needed.

Related

Y-axis scale uneven

When using Chart.js i cant find a way to evenly scale the Y axis. Overiding and using manual scaling( scaleOverride: true ) for every chart is not really an option since there are alot of them and they have different data. Some one have an idea how to fix the scaling of the data?
This is the scaling i want:
Sometimes the scaling gets uneven depending on the data.
You can set the options globally - this will apply to every chart instance. For instance
Chart.defaults.global.scaleOverride = true;
...

Highcharts Column Graph with background color?

I'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor

Reset xAxis[0] and xAxis[1] width in Highcharts

I have a quick question for you re Highcharts.
How do I reset xAxis[0] and xAxis[1] width at runtime, and how do I also reset xAxis[1] offset at runtime? Reason I am asking is because I have a chart harbouring two x-axes and these need to be resized to fit differently sized divs. Example here: http://jsfiddle.net/F3pts/7/
More generally speaking I struggle to reset options at runtime. I understand there are "setOptions" that can define general options for the chart, but that these are then 'trumped' by chart options when the chart is drawn. I however don't always get it how these options can be changed once the chart has already been drawn once. Something like:
newOptions({
chart:{},
xAxis:[{},{}],
etc....
});
Hope you don't think this is a poor quality question. I have trawled through heaps of material on this and cannot find the answer to my needs.
Rgds,
G.
Simple use Axis.update(newOptions), docs.
Where you can set new width/height/offset etc.

How can I draw a custom horizontal line with jqplot?

The pink line is what I'd like to add, to emphazise a certain percentage value. Is it possible with jqplot and how would this be achieved?
You should use canvasOverlay for jqplot to draw custom lines or other objects on your graph.
Please follow the link and here you can learn about how to use canvasOverlay.
http://www.jqplot.com/deploy/dist/examples/canvas-overlay.html

Is it possible to rezise the graph dots in the jquery library flot when being hovered?

when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.

Categories

Resources