Is there any way to draw icon/images/triangle anything inside the chart plot?
Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?
I tried to using the legends, but it's kind hard to add a new one just for it.
Thanks
Edit:
I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.
Does anyone know nice solution for it?
Use either labels or Renderer.
Add the following code at the end:
, function (chart) {
chart.renderer.text('▲', 0, 0)
.attr({
align: 'right',
zIndex: 8
})
.css({
color: '#73903B',
fontSize: '48px'
})
.add()
.align({
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -40
});
});
DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)
Reference:
http://code.highcharts.com/highcharts.src.js (credits part)
Other possible approaches:
Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
Use left, top in labels
Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)
This is the kind of thing easily found in the API.
Related
Is there any way we can set background text in scatter plot? we have chart.plotBackgroundImage to set the image as background. But, I want to set text as background. please help.
You could use Highchart's SVG renderer to give a background text to your chart. You just need the x and y position for the text. This could work for any chart not only scatter plot.
chart.renderer.text('This text is background text', 150, 130)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
The chart is the chart object for the chart you are drawing, 150 and 130 are x and y values. Have a look at this example Codepen
https://codepen.io/samuellawrentz/pen/EpxxJr?editors=1010
I want to reduce the gap between plot area and actual chart in gauge chart,
i have used
HighchartsOptionFactory highchartsFactory = new
JsoHighchartsOptionFactory();
ChartOptions options = highchartsFactory.createChartOptions();
options.chart().type("solidgauge");
options.chart().marginTop(0).marginLeft(0).marginBottom(0).marginRight(0);
options.chart().spacingLeft(0).spacingTop(0).spacingRight(0).spacingBottom(0);
but still there is so much of waste space between plot area and actual chart.
Can somebody help me.
You have to also set up a pane size and its outer radius.
The example in js, but the wrapper API should be the same.
pane: {
size: '100%',
background: {
outerRadius: '100%'
}
},
example: http://jsfiddle.net/ct3pm5op/1/
I'm having some trouble with highstock. I've figured out how to shuffle around other series via the y axis object, however I'm looking to dynamically add more series, and shift the navigator down after I add additional series, along with increasing the height of the containing div as more series are added.
My current approach to moving the navigator is to update the top property of the y axis assigned to the navigator, as informed by this answer:
Move the Highstock navigator position
function moveNavigator(){
chart.navigator.yAxis.update({
height : 50,
top: 202
});
}
http://jsfiddle.net/dwhcj3e7/2/
If my understanding were correct this fiddle should move the navigator from on top of the chart to the bottom of the chart. Is there a way to accomplish this behavior without completely making a new chart object?
Use chart.update() method (available from version 5) and update navigator's top property.
chart.update({
navigator: {
top: 202,
height: 50
}
});
example: http://jsfiddle.net/dwhcj3e7/3/
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
Using the Highcharts example posted here how can you ensure that the Font Awesome icons will be positioned exactly in the middle of the data point like the native symbols/markers are? It gets called like this in the data series and uses the "plugin" that is found in that same Fiddle:
marker: {
symbol: 'text:\uf183' // fa-male
}
Using that example, if you toggle the series on/off a couple of times or zoom in/out the icons are no longer visually accurate, often displaying above the actual coordinate. In the image below you'd believe that data point had a value >50 based on where the icon is.
Their SVGRenderer example here doesn't seem to be effected.
It looks like problem with re-rendering icons later - height of the marker isn't considered. I suggest to change a bit logic for rendering icon:
var text = symbol.split(':')[1],
svgElem = this.text(text, x, y)
.attr({
translateY: h, // translate marker
translateX: -1
})
.css({
fontFamily: 'FontAwesome',
fontSize: h * 2
});
See demo: http://jsfiddle.net/2A7Zf/29/
If you want to use the markers XL-sized (i.e larger radius) for a custom chart (e.g. a Yes/No prevalence chart using the x and check icons, circle empty for the less prevalent one and circle filled for the more prevalent one and data labels showing counts/%s), then I'd recommend this tweak to center the symbols:
translateX: -w/2 + options.radius/4 - 3