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();
}
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
Using Highcharts, I have implemented the basic bar chart and the legend on the bottom of this design. However, I am trying to figure out how to do the circles with the values.
Looking at annotations but this is not next to the point. Or somehow do a second legend?
Any advice on the best approach on this with highcharts would be appreciated.
You can create an annotation in any place on the chart. Example:
annotations: [{
labels: [{
shape: 'circle',
overflow: 'allow',
text: '1',
padding: 50,
point: {
x: 200,
y: 400
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/8ucke60o/
API Reference: https://api.highcharts.com/highcharts/annotations.labels.point
I've migrated from Highcharts 6.2.0 to latest (8.1.0 ) and found incompatibility since then.
I noticed that this exists since v7.0.0.
I can't handle the fontSize of YAxis and the label text of the xAxis.
Working scenario v6.2.0
Unworking scenario v7.0.0+
Basically what I do in this example :
yAxis : display font-size as 4px (ugly of course but to be sure we see the difference b/w working and not working)
xAxis : change the text be displaying for example only the first 3 characters of the label. In my real scenario I have a graphic showing flaticons as label and flaticons+text in table (graphic data are based on table to be generated) and so in the export I'd like to see only the text as I got issue with html flaticons to be rendered in the reporting.
Based on highchart's doc, I don't understand what I'm doing wrong....unless doc hasn't been updated and this functionality (to customize our axis) is not gone.
I'm using Chrome/FF and no highchart export server.
Thanks for your help.
Thank you for sharing it.
It seems like a regression. I reported it on the Highcharts Github issue channel.
Please follow this thread here: https://github.com/highcharts/highcharts/issues/13492
If you need a temporary workaround - ask in the comment under the above link. The core developers should respond to you soon after.
EDIT
As a temporary workaround enable these options in the load callback and trigger the axes updates.
Demo: https://jsfiddle.net/BlackLabel/cprbz1ym/
chart: {
type: 'area',
events: {
load() {
if (this.renderer.forExport) {
this.yAxis[0].update({
labels: {
style: {
fontSize: '4px'
}
},
title: {
style: {
fontSize: '4px'
}
}
});
this.xAxis[0].update({
labels: {
style: {
fontSize: '4px'
},
formatter: function() {
return this.value.substring(0, 2);
}
}
})
}
}
}
},
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
I need to draw a bar chart and need to set width and height for the container div (as there is only that amount of space I can use)
However, when I set height and width, in some cases, highchart will not draw some of the bar labels, even though I think there are places to draw them. Can someone explain this or maybe provide a workaround (without removing height)?
The jsfiddle is http://jsfiddle.net/daxu/md2zk/68/
labels: {
style: {
color: 'black',
fontFamily: 'DINPro',
fontSize: '7.8409px',
fontWeight: 'normal'
},
formatter: function () {
return this.value;
}
}
At the beginning, remove datalabels configuration per each point and use common options. There, you can disable hiding labels by crop option.
Example: http://jsfiddle.net/md2zk/70/
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/