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.
Related
document.autoTable({
head,
body,
startY: XX,
styles: { lineColor: '#c7c7c7', lineWidth: 0, cellPadding: 2, font: 'Helvetica' },
headStyles: { fillColor: '#ffffff', textColor: '#333333', font: 'Helvetica' },
bodyStyles: { fillColor: '#f5f5f5', textColor: '#333333', fontSize: 7, lineColor: '#c7c7c7', lineWidth: 0 }
});
head am passing as below:
const head = [{
content: "طيران الإمارات",
styles: { valign: 'centre', cellPadding: {top: 3}, fontSize: 9, fontStyle: 'bold', cellWidth: 110.6 },
},
{
content: 'Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
},
{
content: 'Tier Miles',
styles: { fontSize: 9, fontStyle: 'normal', valign: 'centre', cellWidth: 35 },
}
];
with Helvetica Font, Head Text showing as special characters.
Special Characters
With Custom font Its showing in Arabic but word is breaking
I have passed as header this "طيران الإمارات" but in pdf its showing as this طير لإما Breaking word
headStyles: { fillColor: '#bde4d1', textColor: '#333333' , fontStyle: 'Amiri' }
you have to add fontStyle in headStyles object
Go to google fonts and download Amiri font ( I have tried other Arabic fonts but they did not work for some reason).
Go to this converter tool to convert your font to base64 and download the generated JavaScript file (When converting your Amiri font, upload one .ttf file per time and not the full .zip folder, otherwise you will get an error. If you want to add more font variants upload and add them separately).
Go to your project and import the downloaded file (or add the script tag manually if you do not use modules).
import "./fonts/Amiri";
// .... here goes your code working with the table.
If you use jspdf-autotable library add the following code to its configs:
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" }, // For Arabic text in the table head
bodyStyles: { font: "Amiri" }, // For Arabic text in the table body
});
Full example with autotable would look like this:
import { jsPDF } from "jspdf";
import "jspdf-autotable";
import "../../../fonts/Amiri";
const jsPDFDoc = new jsPDF();
jsPDFDoc.autoTable({
html: "#my-table",
useCss: true,
theme: "grid",
headStyles: { font: "Amiri" },
bodyStyles: { font: "Amiri" },
});
I have used pie chart in Highcharts and I have a strange issue with chrome browser. I am using it with rails and when the load the link for the first time everything looks fine.(find the image below)
When I navigate other menu and come back to Dashboard, the chart exceed the actual container which is in bootstrap column
<div class="row">
<div class="col-lg-6">
...
</div>
<div class="col-lg-6" id="chart_issues_count">
</div>
</div>
Highcharts code
$('#chart_issues_count').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Issues',
align: 'center',
verticalAlign: 'middle',
y: 5
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
display:'none',
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
size: 300,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
name: 'Issues',
innerSize: '70%',
data: [
['Open', open],
['In - Process', process],
['Solved', solved],
['Closed', closed],
['Re - Open', reopen]
]
}]
});
This happens only with chrome.I have tested with firefox, IE, Safari and in all the three browsers it works fine.
Is there any workaround for chrome?
Also I have tried with reflow as below and its not working
$(window).load(function(){
$('#chart_issues_count').highcharts().reflow();
});
edit
Chrome Version 51.0.2704.106 m
update
I noticed that styles are being applied only after the page loads. As a result it flashes content without styles for a moment and then the styles are applied. Is it a behaviour of rails?( I am pretty new to Ruby on Rails) It never happened with PHP which I am familiar with.
Finally I found the solution. I was using bootstrap CDN link and rails seems to load the CDN Link after $(document).ready(); ( I am not sure of it). I load the highchart in ready method where it takes 100% width of the column where the chart is being loaded(before bootstrap applies).
I installed the bootstrap gem and now everything working fine as expected.
https://github.com/twbs/bootstrap-sass
I should have better learning in rails structure and its working.
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 () {
});
I need the credits line to be underlined. If I take the jsfiddle example of the credits and add the itemStyle from the API it doesn't work. Even with just textDecoration. What's the trick here? textDecoration seems to work with legend.
credits: {
text: 'Example.com',
href: 'http://www.example.com',
itemStyle: {
textDecoration: 'underline',
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
},
Use style, not itemStyle, see: http://jsfiddle.net/SrQaX/7/ docs: http://api.highcharts.com/highcharts#credits.style
HOw to show the tooltip for an image in the jqGrid?
Did you check this >>> Custom Data ToolTips for jqGrid
you can use qtip plugin of jquery for this. in my case i have to show tool tip when particular jqgrid cell get focused.
LoadToolTipRackId = function (elem) {
jQuery(elem).qtip({
content: 'this is an image',
show: 'focusin',
hide: 'focusout',
style:
{
name: 'red',
tip: 'leftBottom',
textAlign: 'left',
fontWeight: '500',
fontSize: '11px'
},
position:
{
corner:
{
target: 'rightMiddle',
tooltip: 'leftBottom'
}
}
});
}
you can visit following link to find out more about qtip plugin
http://craigsworks.com/projects/qtip/
whereas i have to set following column properties in jqgrid in colmodel
editoptions: { size: 7, defaultValue: '0.00000', maxlength: 15, dataInit: LoadToolTipRackId}