I need one help on high chart options,
How to remove the white colour around the percentage with in the pie chart options.
I have attached the image, please see that and help me for this issue.
Please click here
This can be done by modifying the textOutline style property like:
...
plotOptions: {
pie: {
datalabels: {
style: {
textOutline: false
}
}
}
},
...
Related
Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown
https://codepen.io/SophTooke/pen/ExorZZj
[enter code here][2]
Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
formatter: function() {
let chart = this,
weight = chart.point.weight;
return `Weight: <span>${weight}</span>`
}
},
}
},
Demo:
https://codepen.io/sebastian-hajdus/pen/BarjMap
API References:
https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter
https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML
I'm currently using a bar graph to display my data. In this div, my bar graph is sitting at 50% width. If the percentage of the bar is too large for the width, the text next to the bar that displays the percentage such as 10% shows in the bar graph itself. Which is fine, but with the using the same color css as the bar graph. In this situation it is hard to read the percentage.
I would like the percentage to use the same color as the bar graph but Is it possible to change the text to white only when this happens?
Here is a photo example:
Here is a code snippet of what i'm using to change the color of the text using plotOptions
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return ` <span style="color:${this.color};">${this.y} %</span>`;
}
}
}
},
Here is a link to my jsfiddle where the issue is re-created: https://jsfiddle.net/8g4uL0jm/22/
I think that a better idea will be to change the dataLabels color after their initializing, which gives us information about their positions.
Demo: https://jsfiddle.net/BlackLabel/af02bgs7/
events: {
load() {
let chart = this;
chart.series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align !== "right") {
p.dataLabel.css({
color: p.color
})
}
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
Is there any way to completely hide scrollbar's buttons which contain arrow?
In addition to this, is there any way I can set the position of scrollbar such as setting y value so that the scrollbar hovers on the chart?
Setting its color to transparent doesn't help.
scrollbar: {
buttonBackgroundColor: 'transparent',
buttonBorderWidth: 0,
buttonArrowColor: 'transparent',
buttonBorderRadius: 0
}
EDIT:
Even if I hide the elements, I cannot use the space left as the picture below.
You can manipulate SVG elements.
chart: {
events: {
load: function () {
var chart = this;
chart.scroller.scrollbarButtons[0].hide();
chart.scroller.scrollbarButtons[1].hide();
}
}
},
Example:
http://jsfiddle.net/fexw25Lz/
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/
I am having trouble getting the marker radius working with high stock charts. I have been trying to get this working using both plot options, and a setting against the series directly:
plotOptions: {
series: {
marker: {
radius: 90
}
}
},
(or see http://jsfiddle.net/zMH7Q/).
Changing other attributes such as the marker shape works fine, but any changes to the radius seem to be ignored. I have tried setting this in both plot options, and directly against the series but to no avail. It is definately mentioned in the documents (http://api.highcharts.com/highstock#plotOptions.area.marker.radius) so should work unless I am doing something stupid (fairly likely).
Any help would be appreciated :-)
David
In HighStock, unlike HighCharts, the default for marker is enabled: false, this is because the data tends to be very dense and markers wouldn't add much value to the data comprehension of the user.
You need to modify your code to:
plotOptions: {
series: {
marker: {
enabled: true,
radius: 90
}
}
},
for the markers to show up.
EDIT: I will leave the above up in case someone comes across this and needs it. What David really wants to know is whether the series symbol during hover can be changed. The code for that is:
plotOptions: {
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
}
Which is straight from the Highcharts API reference at http://api.highcharts.com/highcharts#plotOptions.scatter.marker.states.hover.radius