We Keep Coding

Having multiple doughnut charts on the same canvas

I have a main doughnut chart and would like to implement another 2 smaller doughnut chart but I am having trouble implementing multiple doughnut charts on the same canvas as my main chart.
How do I solve this issue? Do I just need another chart instance with a .update()?
Something like this:
this is my current code:
var config = {
type: 'doughnut',
data: {
labels: legend,
datasets: [{
backgroundColor: ['rgb(204,0,0)', 'rgb(241,194,50)', 'rgb(41,134,204)', 'rgb(106,168,79)', 'rgb(255,62,153)'],
data: stats,
}]
},
plugins: [hoverLabel, drawBackground],
options: {
radius: this.radius,
hoverOffset: 30,
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: "Top 5 causes of death in " + country,
color: 'rgb(0,0,0)',
align: 'center',
padding: 15,
font: {
size: 25
}
},
legend: {
position: 'right',
title: {
display: true,
color: 'rgb(0,0,0)',
text: 'Legend',
font: {
weight: 'bold',
size: 20
},
},
//Changing mouse cursor over legend item
onHover: (event, chartElement) => {
event.native.target.style.cursor = 'pointer';
},
onLeave: (event, chartElement) => {
event.native.target.style.cursor = 'default';
},
labels: {
color: 'rgb(0,0,0)',
usePointStyle: true,
padding: 20,
textAlign: 'left',
font: {
size: 15,
weight: 'bold'
}
}
}
}
}
};

ECharts Apache: Bar chart - add horizontal level line

I use EChart.JS in my project.
I need to add an accent as a horizontal level line for each bar. And also to add a default value.
var myChart = echarts.init(document.getElementById("sleep_graph"), null, { renderer: 'svg' });
var option;
option = {
xAxis: {
type: 'category',
data: [1, 2, 3, 4],
show: false
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [
{
data: [
{
value: #sleepGraph.DeepSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.DeepSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.DeepSleepDurationGraphColor',
fontWeight: 'bold'
},
labelLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'black',
width: 55,
}
}
},
{
value: #sleepGraph.SleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.SleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.SleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.LightSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.LightSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.LightSleepDurationGraphColor',
fontWeight: 'bold'
}
},
{
value: #sleepGraph.RemSleepDurationValue,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.2, color: '#sleepGraph.RemSleepDurationGraphColor' },
{ offset: 1, color: 'white' }
]),
opacity: 0.8
},
label: {
show: true,
position: 'top',
color: '#sleepGraph.RemSleepDurationGraphColor',
fontWeight: 'bold'
}
}
],
type: 'bar',
barWidth: 35,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);

I failed to see your image but from your description, I think it's possible to do so with an extra bar series stacking on it. See examples at: https://www.makeapie.com/editor.html?c=xwigwFaytn and https://www.makeapie.com/editor.html?c=xD58D_iJlS .

According to ESChart, there's only chart line has markline property (But it only provide single markline). So there's no way to add horizontal level line to bar chart in ESChart.js
But you can try highcharts, it provides adding marker at the chart.
marker: {
symbol: 'c-rect',
lineColor: 'red',
lineWidth:3,
radius: 10
},
type: 'scatter',
Edit:
ApexChart
It's MIT licence and it support showing markers on chart
https://jsfiddle.net/s3xfqw6p/

Y-axis font color using apexcharts

I'm trying to create a candlestick chart with apexcharts, and everything seems to work fine, except that the yaxis is showing up with a very faint color that I can barely see. I can tell that it's showing up because I can update the fontsize and see it, but for some reason the color won't update. Here is my config:
export const chartOptions = {
chart: {
animations: { enabled: false },
toolbar: { show: false },
width: '100px'
},
tooltip: {
enabled: false,
theme: false,
style: {
fontSize: '12px',
fontFamily: undefined
},
x: {
show: false,
format: 'dd MMM',
formatter: undefined,
},
y: {
show: true,
title: 'price'
},
marker: {
show: false,
},
items: {
display: 'flex',
},
fixed: {
enabled: false,
position: 'topRight',
offsetX: 0,
offsetY: 0,
},
},
xaxis: {
type: 'datetime',
labels: {
show: true,
style: {
colors: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-xaxis-label',
},
},
},
yaxis: {
labels: {
show: true,
minWidth: 0,
maxWidth: 160,
style: {
color: '#fff',
fontSize: '8px',
cssClass: 'apexcharts-yaxis-label',
},
offsetX: 0,
offsetY: 0,
rotate: 0,
}
}
}
Here is what I see:
Any ideas why this isn't showing up as white as specified? I'd like to be able to show the yaxis values.

The issue was the version. I did the following:
npm uninstall apexcharts
npm i apexcharts#3.6.3
--restarted npm
npm run start
Then it worked!

How to make a Highcharts semi-circle donut chart using Hightchart-ng

I am attempting to create a Highcharts Semi-circle donut chart in my angular application. I have installed the Highcharts-ng directive. For whatever reason, it appears to be skipping the plotOptions section completely and that is where the start and end angle are set, thereby creating the donut. What I get is a full circle pie chart. Here is my code:
<div ng-app="myapp">
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
//See: https://github.com/pablojim/highcharts-ng
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
I have created a JSFiddle here:
http://jsfiddle.net/mikemahony/hzdewsx8/
What am I missing?

Highcharts-ng directive needs those properties to go under options.
$scope.highchartsNG = {
options:{
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
}
},
In highchartsNGConfig the options property is a standard highcharts options object. e.g. anything you can pass into `new Highcharts.Chart(options); works here.
This options object is watched for changes. When something changes here the whole chart is recreated.

Having trouble to show highchart for each element

I got fetched user from database, and all of them have review score.
I use while statement to show each user and the review score (using highchart).
The problem is that I'm getting only one chart, instead of getting one for each single user.
Here is the code
PHP:
if (isset($_COOKIE['rev_idx'])) {
$review_id=preg_replace('#[^0-9]#','',$_COOKIE['rev_idx']);
if ($review_id==$get_rev) {
$sql1="SELECT * FROM `user`.`review` WHERE reviewer_id='$review_id'";
$query1=mysqli_query($connect_dude,$sql1);
if (mysqli_num_rows($query1)>0) {
$show_review="";
while($row1=mysqli_fetch_assoc($query1)){
$rid=$row1['rid'];
$reviewer_id=$row1['reviewer_id'];
$reviewee_id=$row1['reviewee_id'];
$review_tit=$row1['review_tit'];
$review=$row1['review'];
$image=$row1['image'];
$point=$row1['points'];
$rev_date=$row1['rev_date'];
$sql2="SELECT * FROM `user`.`user_det` WHERE id='$reviewee_id'";
$query2=mysqli_query($connect_dude,$sql2);
if(mysqli_num_rows($query2)>0){
$row2=mysqli_fetch_assoc($query2);
$image=$row2['img'];
$busi_title=$row2['busi_title'];
$show_review.="<br><div id='indi_rev'><div style='width:600px;border-bottom:1px solid black;'></div><div id='rev_dat'>".$rev_date."</div>
<div style='width:600px;border-bottom:1px solid black;'></div>
<div style='float:left;'><a href='../".$reviewee_id."/index.php'><img src='../account/".$reviewee_id."/".$image."' width='130' height='150'></a><br><a href='../".$reviewee_id."/index.php'><b>".$busi_title."</b></a></div>
<div><br><b>".$review_tit."</b><br>".$review."</div><div id='Scores' style='min-width: 100px; height: 80px;max-width: 500px;'></div></div>";
}
}
} else {
$show_review="<b>You have not written any review yet.</b><br>Share your thought to others by writing review.";
}
} else {
header("location:reviewer.php?usr=".$review_id."");
}
}
Javascript:
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var x="<?php echo $point;?>";
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'Scores',
marginRight: 50,
events: {
//load: loadRed
}
},
title: {
text: '',
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 20
}
},
xAxis: {
categories: ['Review Score'],
title: {
text: null
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 11,
width: 90
}
}
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
valueSuffix: ' /100'
},
plotOptions: {
series: {
stacking: 'percent'
},
bar: {
grouping: false,
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false,
align: 'right',
x: -40,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: false
},
credits: {
enabled: false
},
series: [
{
name: 'null',
data: [x],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'Score',
data: [x],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Score',
data: [x],
color: "green",
borderWidth: 0,
borderRadius: 5
}
]
});
});
</script>
Your help would be greatly appreciated

you should make many instance of highcahrt for many users by adding different id and loop your javascript code too.
change your
<div id='Scores' ....
to
<div id='Scores_".$reviewee_id."' ....
and cut your
< script >
block and paste after
$show_review.="<br><div ......
and change
renderTo: 'Scores',
to
renderTo: 'Scores_<?php echo $reviewee_id>',

The problem is that your x variable is string, but should be an array. So consider to print in php JSON (json_encode()) and then loat this in the javascript by the function $.getJSON().