I am using Highcharts to create some chart but I find it's not working for changing the background of a chart's title.
For instance:
// works, the color did get to red
title: {
text: title,
style: {"color":"#ff0000"}
},
// the color did get to white but the background is not set to red.
title: {
text: title,
style: {"backgroundcolor":"#ff0000", "color":"#ffffff"}
},
What should I do to fix this?
Thanks
Referencing this question, you can do this by setting useHTML: true and using background-color.
title: {
useHTML: true,
style: {
color: '#FF00FF',
'background-color': '#000000',
fontWeight: 'bold'
}
},
https://jsfiddle.net/nicholasduffy/a32vL38z/
Related
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'
}
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/
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,
}
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}