I have a little problem. I use the high charts gauge diagram and the dial covers my title of my y-axis. I tried to solve this problem with the zIndex property for my title, like this:
yAxis: {
title: {
text: 'Title Y-Axis',
y: 20,
style: {
fontSize:16,
zIndex: 3
}
},
Unfortunately, it doesn't work. Does anybody have an idea how I put the title in the foreground so that the dial doesn't cover my title?
Thank you in advance.
You need to set useHTML parameter as true.
Example: http://jsfiddle.net/0kdnncvu/2/
Related
I need to change the border color of a specific data series based on his category in a bar chart ... is it possible with some formatter function?
If yes, are there some examples?? Thank you for your help!
For setting colors for series you can define an array of colors.
I'm not sure what you mean with specific data series but it's an option to set color and border for each point individually.
data: [{
y: 814,
borderColor: '#FFFF00',
borderWidth: 10
}]
Example: https://jsfiddle.net/BlackLabel/u6czsqmr/
Thank you for your reply.
I have found a solution that works well.
const scelte = array('uno','due','tre');
labels: {
formatter: function(){
var color = (this.value);
var sper = scelte.includes(color) ? 'red' : 'blu';
return '<span style=\"color: '+sper+';font-weight:bold;font-size:16px;font-family:calibri\">'+this.value+'</span>';
}
}
},
If var color is in array scelte then the label color will be red, in all the other cases the label color will be blu.
I'm trying to solve the same problem for pie chart ... but at the moment I don't find it. Any suggestion?
Thank you
I'm trying to resize the range selector. i'm able to change button sizes but they are coming close to each other. how can i increase the font size without increasing the space between buttons. Thanks in advance.
You can control the rangeSelector buttons by buttonSpacing and buttonTheme options. Setting a fixed width should be enough in your case:
rangeSelector: {
buttonSpacing: 5,
buttonTheme: {
width: 30,
style: {
fontSize: 16
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/5f6aro7t/
API Reference: https://api.highcharts.com/highstock/rangeSelector.buttonSpacing
Please take a look at JSFIDDLE. Here, the green bar doesn't display any value. I know adding overflow:"none", crop:false will display the value. But it goes out of plotting area, sometimes for larger numbers it overlaps title. I would like to get green bar value (ONLY) inside the bar instead of hiding the value.
For particular column (i.e green column) label value to be inside, you can add attribute inside: true in data .Refer dataLabels.inside for more info
series: [{
color: colors[0],
showInLegend: false,
data: [{
....//first value
, {
y: 3500,
name: 'Second',
color: colors[1],
dataLabels: {
inside: true //labels will be inside column
}
},... // third and remaining
});
Fiddle demonstration
Using Highstock or Highcharts, I want my yAxis label on the top. What I don't want, is a varying margin between the left border of the chart and the beginning of the grid lines.
If you take a look at the following fiddle:
JSFiddle
Relevant part is:
yAxis: {
title: {
align: 'high',
offset: 0,
text: 'Rainfall (mm)',
rotation: 0,
y: -10
}
}
This is almost correct, but the offset margin is taken from the label width. If I set offset: -41 instead, it looks exactly right. The problem is, that the -41 is due to the rendered length of the text. If I change the text to something of a different length, the label is positioned wrongly again.
Is there any possibility to make sure, that the positions are always "correct" in my above definition of correct, regardless of the text length?
Screenshot, left part is wrong, right part is correct:
I think that you can use text-anchor property to style your title. Here you can find more information about text-anchor property: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
title: {
align: 'high',
text: 'Rainfall (mm)',
style: {
'text-anchor': 'start'
},
rotation: 0,
y: -10,
x: -25
},
I think that you need to use chart.marginLeft parameter as well. It will give you a chance to set specific left margin for your chart. Here you can find information about it.
http://api.highcharts.com/highcharts#chart.marginLeft
You may also use xAxis.labels.reserveSpace parameter to turn off reserving space for labels: http://api.highcharts.com/highcharts#xAxis.labels.reserveSpace
Here you can find live example how your chart can work with this options:
http://jsfiddle.net/Ljwp7694/
Kind regards,
I have a license for highcharts and I would like to create a char like the one bellow:
The most similar component on highcharts is the following one:
Does someone know is is posible to replace the PIE inside for just a percent? or some other good client side javascript librarie to do it?
You can find a demo and the API in the following links.
DEMO http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-donut/
API http://api.highcharts.com/highcharts#chart
Thanks
Check about innerSize.
"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0." reference
Than you can take a look this example which shows how to put the text inside the donut chart.
Hope it help you.
You might try using title as an alternative and rather simple approach.
title: {
text: 'Budget',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
JsFiddle: http://jsfiddle.net/amigoo/zwod86e1/
function(chart4) {
chart4.renderer.text('<span style="word-wrap: break-word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5)
.css({
color: '#4b4b4b',
fontWeight: 'bold',
fontSize: '12px'
})
.add();
}