Here is my chart : www.jsfiddle.net/bs9cLff5
I want to add the percent directly on the chart.
Example for team1 : I want to show 100% on the green.
Next, I would like to personalize the text in the label.
Team1
Good 100%
Become
Team1
'My text'
Is it possible?
Someone can help me please
Thank you everybody :D
You can use renderer to add custom elements (like text) in the chart.
chart.renderer.text('any text', 140, 140)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
I can add to the previous answer, you can even define on click events for the label. It's very simple.
ren.label('message', 10, 10)
.attr({
fill: 'red',
stroke: 'white',
'stroke-width': 2,
padding: 5,
cursor: 'pointer',
r: 5
})
.css({
color: 'white',
width: '100px'
})
// action on click
.on('click', function () {
});
Related
I am using a highchart pie chart and displaying the data in the centre via.
function(chart1) { // on complete
var xpos = '50%';
var ypos = '50%';
var circleradius = 40;
// Render the circle
chart1.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#fff',
}).add();
// Render the text
chart1.renderer.text(chart1.series[0].data[0].percentage + '%', 62, 80).css({
width: circleradius * 2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
However I would like to prevent displaying any decimal places, currently 33.33333%. I would like to display this as 33%
Is this possible, I know there is a setting allowDecimals but this did not work.
You get original percentage value from point, which it is not rounded. Use JS Math.round function:
chart1.renderer.text(Math.round(chart1.series[0].data[0].percentage) + '%', 62, 80)
.css({
width: circleradius * 2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
})
.attr({
zIndex: 999
})
.add();
Live demo: https://jsfiddle.net/BlackLabel/0z4hLbaw/
I am doing an internship now and this is my first time to touch OL3.
I try to make a demo to draw and change text with markers.
But I find that I can only change all text of the marker instead of changing the selected one.
Here is a simple jsfiddle I made.
features: select.getFeatures()
This is not work for me I think.
So how can I do that?
You may change you style variable to a ol.FeatureStyleFunction() to get the label from a property stored at the feature.
var style = function () {
return [
new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
}),
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: '#000' }),
stroke: new ol.style.Stroke({
color: '#fff', width: 2
}),
// get the text from the feature (`this` is the feature)
text: this.get('text')
})
})
];
};
And to update text, update this property:
var features = select.getFeatures();
features.forEach(function(feature){
feature.set('text', nameElement);
});
http://jsfiddle.net/jonataswalker/b44nxco8/
Can someone please suggest if there is anyway we can rename the items in the export menu in highcharts. Currently it has entries like:
Download PNG image
Download JPEG image
...
I want to remove word "image". Moreover want to control the complete styling.
There are lots of options for this. Some can be done in Javascript, and I'm sure more can be done in CSS. Here is a JSFiddle example showing the desired text changes and some style changes.
You can read the details on this in the API under lang and navigation.
The text is changed with:
lang: {
printChart: 'Print chart',
downloadPNG: 'Download PNG',
downloadJPEG: 'Download JPEG',
downloadPDF: 'Download PDF',
downloadSVG: 'Download SVG',
contextButtonTitle: 'Context menu'
}
And the style of the button and menu with:
navigation: {
menuStyle: {
border: '1px solid #A0A0A0',
background: '#FFFFFF',
padding: '5px 0'
},
menuItemStyle: {
padding: '0 10px',
background: null,
color: '#303030',
fontSize: '11px'
},
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'
},
buttonOptions: {
symbolFill: '#E0E0E0',
symbolSize: 14,
symbolStroke: '#666',
symbolStrokeWidth: 3,
symbolX: 12.5,
symbolY: 10.5,
align: 'right',
buttonSpacing: 3,
height: 22,
// text: null,
theme: {
fill: 'white', // capture hover
stroke: 'none'
},
verticalAlign: 'top',
width: 24
}
}
You can get the default values from the source code, almost at the very top. Some of the defaults use variables that you won't have though, so you may need to change them. And as mentioned, CSS may get you the extra distance.
How do I include the events text to the left of chart when exporting in HighCharts.
The text disappears on export.
ref: http://jsfiddle.net/no1uknow/4PU9j/
events: {
load: function () {
var label = this.renderer.html("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate")
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'top',
y: 40 // offset
}), null, 'spacingBox');
}
},
marginLeft: 300
},
The exporting function in Highcharts renders the original chart as it was passed in first, not after it's been modified by further actions, such as using the renderer to add text. Fortunately, you can manually call the exportChart function and pass in additional chart settings, including functions for adding the renderer text. This will let you do what you want.
See here for details: Can not exporting renderer shapes added in callback function in highcharts / highstock
You need to use a renderer text instead of html (which is not exported).
events: {
load: function () {
var label = this.renderer.text("36 Aircraft delivered to Air 1<UL><li>13 in 2013</li><li>23 in 2014</li></UL>52 Aircraft remaining on Air 2 certificate",100,100)
.css({
width: '180px'
})
.attr({
'stroke': 'silver',
'stroke-width': 1,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'left',
x: 0, // offset
verticalAlign: 'top',
y: 40 // offset
}), null, 'spacingBox');
}
},
Example: http://jsfiddle.net/4PU9j/1/
I have text on a chart like below. I want to change the font size of the text "abc". I tried putting 'font-size':'8px' inside of the css, but it did not work. Does anyone have an idea about this?
Here is the fiddle link:
http://jsfiddle.net/3hGz2/
'events': {
'load': function () {
var label = this['renderer']['label']('* y='+ slope +'x'+'+('+ intercept + ')<br> R^2='+ rSquare)
.css({
'width': '150px',
'color' : 'grey',
'font-size':'8px'
})
.attr({
'stroke': 'grey',
'stroke-width': 0,
'r': 5,
'padding': 3
})
.add();
label.align(Highcharts.extend(['label']['getBBox()'], {
'align': 'right',
'x': -110, // offset
'verticalAlign': 'bottom',
'y': -130 // offset
}), null, 'spacingBox');
}
}
See http://jsfiddle.net/3hGz2/1/
you can specify the font size as fontSize
.css({
'width': '150px',
'color' : 'grey',
'fontSize':'20px'
})