I'd like to add an element (a circle) above some of the columns in a Highchart generated chart. In this chart, columns are stacked, to visually compare two series. But sometimes I need to draw a circle above some of these columns to show this year something special happened. I've tried to create a dummy serie, with bubbles but it doesn't work. So I believe that draw api is a better option, but I don't know how to calculate where I have to draw, to set element attributes x and y.
You can use image renderer http://api.highcharts.com/highstock#Renderer.image() or more user friedly, scatter series which allows to define your own markers (like images). http://jsfiddle.net/cKKhF/
{
type:'scatter',
showInLegend:true,
data:[10,9,11,11,8],
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}
Related
I opened the basic column chart using Highcharts and now I need to make little customization. I would like to change the color of the plot band that is visible when I place the mouse pointer within one category on X axis. I tried to use the xAxis -> plotBand option, but it only changes the color with specific start and end values. How could I change this color on mouseover?
This is some example, how I would like it to look: https://www.dropbox.com/s/ilxhd99xo8pwn7v/Zrzut%20ekranu%202015-09-05%2020.20.17.png?dl=0
I'm in the process of evaluating Highcharts as a replacement for our current platform, and have some questions about how we can replicate one of our existing charts:
I've been able to recreate the basic floating stacked column chart, but need help with some of our specific features.
1) Is is possible to replicate the multiple y-axes with the columns displayed to the right of each within a single chart? If not, I suppose we could do 3 charts next to one another - and draw our own titles above (and data table below). If we go this route, is there a way to group all these elements in a single "container"? We need to export these charts to images and need to end up with a single image that looks like the one attached.
2) How would I create the inner box within each column? Do I need to draw it myself, or can I create another column series with a border and transparent fill and somehow set the width of the column to be less than the width of the main columns (note that the number of columns on each chart is dynamic, so the column widths can't be a fixed size. i.e. the inner box width needs to be a percentage of the main column width)?
3) Assuming #2 is possible, I could probably use the same technique to plot the horizontal line - just make the height 0 (or very small) and make the bar wider instead of smaller. Is there a better way?
4) How do I get the x coordinates of the columns so we can align our data table under each column?
5) Can I separate the individual points within the column. You'll notice in my jsfiddle, product 1 and product 2 are vertically aligned in the center of the column. Can I spread them out within each column as the 2 points are in the screenshot?
Thanks in advance for advice on all or any of the above.
Mike
1) You can use multiple yAxis, see the example
2) You can use renderer or mix column/column range and border parameter, example
plotOptions: {
columnrange: {
pointPadding:0.2,
color: 'rgba(255,255,255,0)',
borderColor: '#303030'
}
},
3) Use renderer, as above or scatter series with customied marker
4) Column is shape in point.element.graphic, so you can extract it.
5) as far as I know, it is not possible
I have a line chart with markers disabled.
The legendSymbol is currently a line. I would like to show the symbol as a square. Any pointers?
With the latest Highcharts release you can also exchange the method that draws the legend icon from outside of Highcharts:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
To use the element that is drawn for the area chart as an icon for a line graph.
(I have used this in Highcharts Stockcharts but this should be applicable in basic Highcharts as well)
You can use two series (one normal and one fake) with defined custom symbol. First should be hidden in legend. Then only what you need is use legendItemClick and call action.
http://jsfiddle.net/5m9JW/339/
You can change the stroke-width attribute on the path element.
We can provide functions to Highcharts that will be drawn whenever the chart is drawn. Since redraw is not called on the first drawing the load event is needed
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
I like this as it's quicker than than the other two answers and adding a "fake series" feels like a hack.
If you need further customization Hendrik's would be great! The original question asked for a square, if all that's really needed is a rectangle (or a large square) this works great.
Also Hendrik's answer didn't work for me out of the box in HighStocks, this does.
I have a HighStock chart that is pulling in some OHLC data and creating a chart with 3 series - 1 candlestick, 1 volume, and 1 set of flags. This all works fine.
I want to add some custom trend lines to the chart. I will determine the points and do the paths based on custom logic.
The problem is that when I use the Renderer from the Chart to draw my path, the path is not connected to the underlying chart. As the chart date range is modified and/or new points are added to the primary series, the placement and size of my custom path remains unchanged. It is constant.
I need the location/endpoints of the custom path to be tied to the datapoints of the chart, not the coordinates of the svg drawing. Is there a way to accomplish this?
Here is the portion of the code that is adding a simple path from pointa to pointb. The path renders as expected but is then static:
buildPath: function(pointa, pointb){
this.myChart.renderer.path(this.buildPathArray(pointa,pointb))
.attr({
'stroke-width': 2,
stroke: 'red'
}).add();
},
buildPathArray: function(pointa, pointb){
var pathArray = [];
pathArray.push('M');
pathArray.push(pointa.plotX);
pathArray.push(pointa.plotClose);
pathArray.push('L');
pathArray.push(pointb.plotX);
pathArray.push(pointb.plotClose);
pathArray.push('Z');
return pathArray;
}
Per request, I created a JS Fiddle that demonstrates the general issue.
Any help is much appreciated.
SOLVED
This doesn't seem to come for free with Highcharts. Or if it does I did not find out the technique.
I had to use both the load and redraw events of the chart object contained in my StockChart.
On load, I draw the initial paths, aligned with the Point objects involved in my trending lines. As I build these path objects (SVGElement objects containing the genuine SVG path elements) I keep track of them in an array.
On redraw, I have to both destroy the old trend lines and create new ones. So I loop over my array of old elements and remove each from their own parentNode. Then I draw a fresh version of my trend lines based on the newly plotted location of each of my relevant Point objects.
The end result is that on each redraw event, the lines appear to move with the chart, when they're really being destroyed and recreated.
When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.