Highchart Legend rendering issue on Linux browsers, I think issue Happens in font family in highcharts. how to add custom font family to legend
Below added my code
title: {
text: c,
widthAdjust: -180
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
legend: {
itemStyle: {
width:'100px',
color: '#666',
textOverflow: 'ellipsis',
overflow: 'hidden'
}
},
To change the font family of the legend, you need to set fontFamily of legend.itemStyle like this:
legend: {
itemStyle:{
fontFamily: 'Comic Sans MS'
}
}
Working example: http://jsfiddle.net/sc3Lnfa9/5/
Related
I cannot seem to get the tooltip value label to change using the tooltip: { pointFormat: "custom label"} option.
I'm integrating Highcharts in the chartkick gem, and I've ensured that chartkick is indeed using the highcharts adapter. The other library options work such as xAxis and yAxis.
Here is the code in question:
column_chart #registrations.joins(:clinic).group("clinics.name").count,
title: "Registrations Per Clinic",
library: {
tooltip: {
pointFormat: "Registrations: <b>{point.y}</b>"
},
xAxis: {
title: { text: "Clinic" }
},
yAxis: {
allowDecimals: false,
title: { text: "Number of Registrations" }
}
}
No matter what the tooltip renders with the word Value
You can try tooltip.formatter : Documentation
Using the sample provided by highcharts (less some data for easier visability) https://jsfiddle.net/mevbg82z/2/
I'm trying to make the bubble labels ('USA', 'Canada', 'Mexico', 'Brazil') bigger.
I've looked at the series API for packedbubble but haven't found a way to increase the size of the text in the bubbles through options https://api.highcharts.com/highcharts/series.packedbubble
The only way I've found to do this is to write css, which doesn't handle scaling, doesn't center up, and generally seems hacky...
.highcharts-data-label text tspan {
font-size: 24px
}
Whats the correct way to increase the size of these labels?
Looks like you can set fontSize inside plotOptions.packedbubble.dataLabels
plotOptions: {
packedbubble: {
minSize: '20%',
maxSize: '100%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: true,
parentNodeLimit: true
},
dataLabels: {
enabled: true,
format: '{point.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal',
fontSize: '24px'
}
}
}
},
Looking to work with the below chart, but cannot get to change the title color to white and the axis and axis numbers to grey (or white). This should go above a dark background. Does anybody knows how to change the title color with echarts ?
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Total memebers of the club',
fontColor: 'white',
display: true,
position: 'bottom'
},
tooltip: {},
legend: {
data: ['Total member']
},
xAxis: {
data: ["11/2018", "12/2018", "01/2019", "02/2019", "03/2019", "04/2019"]
},
yAxis: {},
series: [{
itemStyle: {normal: {color: 'white'}},
name: 'Total',
type: 'bar',
data: [5, 384, 612, 2344, 4670, 9372]
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
Give this a try. Add it under 'text:' like:
text: 'Total memebers of the club',
textStyle: {
color: '#ed2d2e'
}
Some datalabels in my barchart aren't shown: Only one datalabel is shown at the categories "Wohnung Zustand", "Wohnumfeld" and "Wohn- und Nebenkosten".
My current solution is to chose a smaller font-size
dataLabels: {
style: {
fontSize: '7pt',
fontFamily: '"Tahoma"',
fontWeight: 'normal'
}
but now the label is hard to read. I'd like to have a bigger font-size and overlapping labels, but my overflow and crop-settings don't work.
There is an allowOverlap-setting: the chart with overlapping datalabels..
dataLabels: {
enabled: true,
allowOverlap: true,
}
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.