How do I center a semi-circle doughnut chart? - javascript

I'm trying to display a doughnut or semi-circle chart inside a materialize card, which is a responsive div.
I need to display simple data and use the chart as a progress bar. I started from the example in the HighCharts documentation.
Now I need to position the plot at the bottom, but remove the white space from the top. If I set the position at center:[50%,50%] there is a white space at the bottom of the container.
Is there a way to crop the height of the container and keeping the aspect ratio?
This is the code I'm using:
var data = [
{
name: 'Done',
y: 76.1,
color: "#ff6666",
dataLabels: {
enabled: false
}
},
{
name: 'To do',
y: 23.9,
color:"#dddddd",
dataLabels: {
enabled: false
}
}
];
Highcharts.chart('container', {
chart: {
plotBorderWidth: 0,
height:"400px"
},
title: {
text: 'Title'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,distance: -50,
style: {fontWeight: 'bold', color: 'white'}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '100%']
}
},
series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]
});
Here is the result I get:

You can try to play around a bit with container height, plotOptions.pie.center and plotOptions.pie.size to get the right dimensions. Please check the code below. I have changed the height of your chart to 200px, center to ['50%', '70%'] and added size of 200%.
See the sample here: https://codepen.io/anon/pen/pGVyQX?&editable=true
var data = [
{
name: 'Done',
y: 76.1,
color: "#ff6666",
dataLabels: {
enabled: false
}
},
{
name: 'To do',
y: 23.9,
color:"#dddddd",
dataLabels: {
enabled: false
}
}
];
Highcharts.chart('container', {
chart: {
plotBorderWidth: 0,
height:"200px"
},
title: {
text: 'Title'
},
tooltip: {
pointFormat: '<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {fontWeight: 'bold', color: 'white'}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '70%'],
size: "200%"
}
},
series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]
});

Highcharts chart consists of several HTML elements. The height option is used for setting height style for a child of the HTML element you created as a chart container.
The solution to your problem can be setting different heights:
CSS:
#container {
height: 200px;
...
}
JS:
chart: {
height: 400
},
series: [{
type: 'pie',
name: 'Value',
innerSize: '70%',
center: ['50%', '50%'],
data: data
}]
Live demo: http://jsfiddle.net/BlackLabel/du60mrgp/

Related

Highcharts - Xrange chart events issue

I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load

how to add color inside a 3d chart in highchart js

I am using 3d option enabled scatter type highchart, now i want to color inner 3d area with two different colors, say red and blue. So my question is
1. How to fill color inside a 3d area?
2. If filled, how to split that inner 3d area into two and add two different color?
my code is
var chartClassification = new Highcharts.Chart({
chart: {
renderTo: 'containerClassification',
margin: 20,
type: 'scatter',
options3d: {
enabled: true,
alpha: 10,
beta: 30,
depth: 250,
viewDistance: 5,
fitToPlot: false,
frame: {
bottom: { size: 10, color: 'rgba(0,0,0,0.02)' },
back: { size: 100, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
}
}
},
title: {
text: 'Classification'
},
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10
}
},
yAxis: {
min: 0,
max: 10,
title: null
},
xAxis: {
min: 0,
max: 10,
gridLineWidth: 1
},
zAxis: {
min: 0,
max: 10,
showFirstLabel: false
},
legend: {
enabled: false
},
series: [{
name: 'Reading',
color: 'black',
data: []
}]
});
I have created a fiddle to demonstrate what you are asking about:
https://jsfiddle.net/cnxwue7k/
It's fairly easy to change the colors of each 3d area
just change the colors in the frame object:
frame: {
bottom: { size: 10, color: 'grey' },
back: { size: 100, color: 'red' },
side: { size: 1, color: 'blue' }
}
further info here:
https://www.highcharts.com/docs/chart-concepts/3d-charts
Hope that helps :-D
Let me know if you need any more help
EDIT:
As Paul pointed out below in the comments, you can also add more colored axis which gives the desired effect:
http://jsfiddle.net/g6jhvcd2/

Responsive Highchart legend position

Is there a way to have the Highcharts Pie chart to bring down the legend when the screen size is small. Please see attached image for reference.
Here is a sample image when the screen is big.
This would what it looked like when in small screen or small device
Is this possible to achieve? Thanks for your help.
You could check the window width before creating the chart and using that information to set the alignment of the legend. For example (JSFiddle):
var isBig = $(window).width() > 700;
var legendBig = {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
};
var legendSmall = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
}
$('#container').highcharts({
legend: isBig? legendBig : legendSmall,
// ...
});
This is an old post, but since I ran into it, it's likely that someone else will at some point. I found out that since Highcharts 5 you can configure options for responsive behavior: https://www.highcharts.com/docs/chart-concepts/responsive, so this is the way to go now.
Here is the config I used to achieve this effect:
{
chart: {
type: 'pie',
},
legend: {
layout: 'vertical',
squareSymbol: false,
symbolRadius: 0,
},
plotOptions: {
pie:
showInLegend: true,
},
},
responsive: {
rules: [{
condition: {
minWidth: 700,
},
chartOptions: {
legend: {
align: 'right',
verticalAlign: 'top',
}
}
}]
},
}
Since you are asking for a responsive layout I've made a little fiddle which listens to the resize event and changes to legend attributes accordingly.
Not sure if it will work that well (the legend may need some adjusting in each position) but the spirit is the following:
$(function () {
$(document).ready(function () {
$(window).resize(function () {
var chart = $('#container').highcharts();
var isBig = chart.chartWidth > 450;
console.log(chart.chartWidth);
if (isBig) {
chart.legend.options.align = "right";
chart.legend.options.verticalAlign = "middle";
chart.legend.options.layout = "vertical";
chart.isDirtyLegend = true;
} else {
chart.legend.options.align = "center";
chart.legend.options.verticalAlign = "bottom";
chart.legend.options.layout = "horizontal";
chart.isDirtyLegend = true;
}
});
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
$(window).trigger("resize");
});
});
On each resize the chart width is checked and if it's below a threshold the legend changes position attributes.
When the chart is redrawn (which it would when its container gets smaller) it the legend is drawn correctly.
Example fiddle: https://jsfiddle.net/9xfL6rz1/2/

DataLabels in Highcharts are outside the container / not showing

I'm drawing a half-donut-pie-chart (using innersize and start-/endAngle). But my datalabels are outside the plot area (below the center point / xAxis) or not showing at all regarding my settings.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '',
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
center: ['50%', '100%'],
size: '140%',
cursor: 'pointer',
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
//useHTML: true,
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
},
style: {
width: '100px' // for line wrap on long dataLabels
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox and this is very very very long name with some spaces etc.', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
See here: jsfiddle
Using useHTML: true, useHTML: true did not work at all any positive.
Using useHTML: true would render the overflowing dataLabels inside the plot, but my long dataLabels disapeared.
So how can I accomplish this having the following things in mind?
My half-donut should always be at the bottom of my plot area and use
the space (not be too small).
It happens that I have long datalabels so defining a style.width seems to do a line-wrap if needed.
DataLabels should always be above the xAxis and not fall below the bottom of my half-donut.
DataLabels should always be shown and be outside of the chart using connectors.
Thanks in advance and best regards.
It looks like possibly bug, reported here: https://github.com/highslide-software/highcharts.com/issues/2630

I need help using a variable to populate a table to create a Javascript scatter plot

I am trying to use this Javascript to create a scatter plot: http://www.highcharts.com/demo/scatter/gray
Im using it just like it shows there and when i copy the graph with the info from the example it works fine.
I created a function to populate the table to how I want...this is how my code looks
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
<script>
var rateValueData = <?php echo json_encode($data);?>;
$(function (scatter) {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: THIS IS WHERE I NEED TO USE THE VARIABLE!!!!
}, ]
});
});
</script>
so the function to create the Variable works but then how can i use that variable to populate the data for the graph
This is what the variable displays at when I echo it out:
var rateValueData = [["7.59090","104.2"],["1.58181","101.3636364"],["0.86363","106.5090909"],["0.7","73.86363636"],["2.7","94.38571429"],["2.48333","104.4727273"],["22.45","103"],["4.09090","105.3888889"],["1.91818","102.2909091"],["1.85","94.82727273"],["62.1","102.7666667"],["6.31818","100.7454545"],["2.31818","107.9545455"],["5.8","99.9625"],["1.92727","105.4727273"],["1.1","102.3"],["16.95","99.40909091"],["0.6","96.35"],["81.68","103.7909091"],["11.5818","116.7363636"],["2.64545","104.8111111"],["1.72","105.73"],["1.24545","104.9272727"],["1.35454","101.9363636"],["32.6363","99.05"],["15.5727","102.05"],["0.8","103.6"],["2.37272","109.7818182"],["0.9","99.62727273"],["4.05454","93.06363636"],["1.1","101.2272727"],["2.70909","102.5888889"],["1.35454","106.3363636"],["41.2181","101.3375"],["0.52727","104.4363636"],["14.8818","107.3909091"],["2.18333","98.82727273"],["3.7","66.70909091"],["10.3272","113.5545455"],["2.31428","96.51818182"],["1.14","101.7727273"],["11.9727","102.4272727"],["1.68571","101.3727273"],["1.48181","102.1454545"],["1.3","103.5181818"],["12.3090","100.8545455"],["0.91818","101.9272727"],["6.51","92.75"],["10.7818","98.05"],["21.46","97.95"],["8.35","98.85"],["7.6625","98.53"],["2.79090","106.1909091"],["1.17","107.3090909"],["19.9181","107.6909091"],["0.61666","50.03636364"],["2.68181","104.5818182"],["1.11428","80"],["1.93333","105.0454545"],["0.84545","99.36"],["2.46363","105.8714286"],["1.49090","104.9272727"],["50.4545","106.6636364"],["1.24545","103.9363636"],["1.01818","102.1636364"],["1.12727","104.7090909"],["2.22222","96.01818182"],["7.83636","101.4090909"],["4.5","98.98181818"],["8.99090","116.1571429"],["1.67272","105.1545455"],["6.25","106.5727273"]];
That is the data that I need to plot in the scatter chart.
Can anybody help me out?
Let me know if you need more info
The problem is your array contains string instead of numeric value.
Try with
var rateValueData = [[7.59090,104.2],[1.58181,101.3636364],[0.86363,106.5090909],[0.7,73.86363636],[2.7,94.38571429],[2.48333,104.4727273],[22.45,103],[4.09090,105.3888889],[1.91818,102.2909091],[1.85,94.82727273],[62.1,102.7666667],[6.31818,100.7454545],[2.31818,107.9545455],[5.8,99.9625],[1.92727,105.4727273],[1.1,102.3],[16.95,99.40909091],[0.6,96.35],[81.68,103.7909091],[11.5818,116.7363636],[2.64545,104.8111111],[1.72,105.73],[1.24545,104.9272727],[1.35454,101.9363636],[32.6363,99.05],[15.5727,102.05],[0.8,103.6],[2.37272,109.7818182],[0.9,99.62727273],[4.05454,93.06363636],[1.1,101.2272727],[2.70909,102.5888889],[1.35454,106.3363636],[41.2181,101.3375],[0.52727,104.4363636],[14.8818,107.3909091],[2.18333,98.82727273],[3.7,66.70909091],[10.3272,113.5545455],[2.31428,96.51818182],[1.14,101.7727273],[11.9727,102.4272727],[1.68571,101.3727273],[1.48181,102.1454545],[1.3,103.5181818],[12.3090,100.8545455],[0.91818,101.9272727],[6.51,92.75],[10.7818,98.05],[21.46,97.95],[8.35,98.85],[7.6625,98.53],[2.79090,106.1909091],[1.17,107.3090909],[19.9181,107.6909091],[0.61666,50.03636364],[2.68181,104.5818182],[1.11428,80],[1.93333,105.0454545],[0.84545,99.36],[2.46363,105.8714286],[1.49090,104.9272727],[50.4545,106.6636364],[1.24545,103.9363636],[1.01818,102.1636364],[1.12727,104.7090909],[2.22222,96.01818182],[7.83636,101.4090909],[4.5,98.98181818],[8.99090,116.1571429],[1.67272,105.1545455],[6.25,106.5727273]];
This demo is throwing an error
While this is working

Categories