I wanted to generate a pie-chart to include in an email body by generating < img src = "...." > tag. For that, i came across a chart library called Quickcharts(https://quickchart.io/) which is an open-source charting library.
Somehow, I don't know how to change the background color of each slice in Quickcharts. Currently, I have something like this,
https://quickchart.io/chart?width=270&height=200&c={type:%27pie%27,data:{labels:[%27High%27,%27Medium%27,%20%27Low%27],%20datasets:[{data:[50,60,70]}]}}
I want to change the background color of pie chart and bring the quickcharts, something similar to this.
https://image-charts.com/chart?cht=pc&chco=4e73df%2C0f3dc4%2C9fb4f3&chd=t:11,110,69&chs=500x160&chl=5.8%25%7C57.9%25%7C36.3%25&chdl=High%7CMedium%7CLow
Let me know if anyone could help. Thanks in Advance.
Using Chart.js, you can set the background color of a pie chart with the backgroundColor attribute:
{
type: 'pie',
data: {
labels: ['High', 'Medium', 'Low'],
datasets: [{
data: [50, 60, 70],
backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
}]
}
}
Additionally, you may want to change the color of the labels using the datalabels plugin:
{
type: 'pie',
data: {
labels: ['High', 'Medium', 'Low'],
datasets: [{
data: [50, 60, 70],
backgroundColor: ['#4e73df', '#0f3dc4', '#9fb4f3']
}]
},
options: {
plugins: {
datalabels: {
color: '#fff'
}
}
}
}
Pack it into the chart URL:
https://quickchart.io/chart?bkg=white&c=%7Btype%3A%27pie%27%2Cdata%3A%7Blabels%3A%5B%27High%27%2C%27Medium%27%2C%27Low%27%5D%2Cdatasets%3A%5B%7Bdata%3A%5B50%2C60%2C70%5D%2CbackgroundColor%3A%5B%27%234e73df%27%2C%27%230f3dc4%27%2C%27%239fb4f3%27%5D%7D%5D%7D%2Coptions%3A%7Bplugins%3A%7Bdatalabels%3A%7Bcolor%3A%27%23fff%27%7D%7D%7D%7D
And it will look like this:
Related
I am trying to achieve the Tooltip shown below in the first image. Inside of the tooltip I need to display the yAxes and xAxes data. The chart.js version I am using is 3.7.0
My tooltip looks like this:
The tooltip that I am trying copy:
The chart.js documentation is quite hard for me to understand. Is there any guru that can explain to me.
Question: Why is my tooltip returning the yAxes data, that I return as a variable(label) as undefined?
Are there any other options I can use to make my chart look like the chart in the second picture?
My Code:
tooltip: {
displayColors: false,
backgroundColor: 'rgba(45,132,180,0.8)',
bodyFontColor: 'rgb(255,255,255)',
callbacks: {
title: function(item, everything){
return;
},
label: function(item, everything){
//console.log(item);
//console.log(everything);
let first = item.yLabel;
let second = item.xLabel;
let label = first + ' ppm';
return label;
}
}
}
Thank you in advance for your time and efforts, please help me figure out what am I doing wrong!
yLabel and xLabel dont exist anymore on the tooltip, they are V2 syntax.
You can just axess the y object in the parsed section to get the y value. Then you can use the afterBody callback to show the x label like so:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
tooltip: {
displayColors: false,
backgroundColor: 'rgba(45,132,180,0.8)',
bodyFontColor: 'rgb(255,255,255)',
callbacks: {
title: () => {
return
},
label: (ttItem) => (`${ttItem.parsed.y} ppm`),
afterBody: (ttItems) => (ttItems[0].label)
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
i have a multilevel donut chart but it is not rendering correctly here is code
the problem is, onmouseover on all green parts it says objects, on all grey parts it says products, solution i would like is, on outer ring it should say products, in middle objects, and inner most should be materials, grey areas should just show number. here is a jsfiddle of the problem
Code:
var op=93;
var ap=99;
var mp=66;
var ctx = new Chart(myChart, {
type: 'doughnut',
data: {
labels: ['Objects', 'Products', 'Materials'],
datasets: [{
label: 'Objects',
data: [op, 100 - op],
backgroundColor: ['#006a4e','#eeeeee'],
hoverOffset: 4
},{
label: 'Products',
data: [ap, 100 - ap],
backgroundColor: ['#2e856e', '#eeeeee'],
hoverOffset: 4
},
{
label: 'Materials',
data: [mp, 100 - mp],
backgroundColor: ['#5ca08e', '#eeeeee'],
hoverOffset: 4
}
]
},
options: {
//cutoutPercentage: 40,
height: 200,
width:200
}
});
You can achieve that fairly simple with Chart.JS 2.7.2. Add labels to each dataset like this:
data: {
labels: ['Existing', 'Non'],
datasets: [
{
labels: ['Objects', 'Non-objects'],
...
}, {
labels: ['Products', 'Non-products'],
...
},
{
labels: ['Materials', 'Non-materials'],
...
}
]
}
And add the following label tooltip callback:
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
}
}
}
Demo: https://jsfiddle.net/adelriosantiago/fxd6vops/3/
I am sure it is possible with Chart.JS > 3.0 too but I have no idea how since quite a few things changed in the structure.
I had a same problem which took a lot of time but what worked in the end was importing these elements and initialising them ..
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend);
these are the elements that helps make the entire chart. you can't skip them
I use chart.js and I would like to display labels at the right of each bar but I got a problem with the first label.
I use the plugin chartjs-plugin-datalabels it work but the first label is hidden.
Do you know how to fix this?
https://jsfiddle.net/rq78pg4j/1/
var ctx4 = $('#chart_choice');
var chart_market = new Chart(ctx4, {
type: 'horizontalBar',
data: {
labels: ['Legend 1', 'Legend 2'],
datasets: [{
data: [12, 10],
label: '# of Votes',
backgroundColor: [
'rgba(243,212,205,1)',
'rgba(243,212,205,1)'
],
borderColor: [
'rgba(223,142,123,1)',
'rgba(223,142,123,1)'
],
borderWidth: 1
}]
},
options: {
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
color: '#0B4892',
font: function(context) {
var w = context.chart.width;
return {
size: w < 512 ? 12 : 14,
weight: 'bold',
};
},
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
});
The problem is that Chart.js is not aware of what chartjs-plugin-datalabels is doing. Therefore, it doesn't reserve enough space at the right of the chart, allowing the labels of the largest bars to appear on the canvas.
This can be fixed by defining extra padding at the right of the chart as follows.
options: {
layout: {
padding: {
right: 100
}
},
...
For further details, please consult the page Layout Configuration from the Chart.js documentation.
as title states. I'm trying to create a diagram with chart.js-2. The diagram is supposed to show datapairs for humidity and temperature. On the X-Axis i display time. I have two Y-Axis - one for temperature and another for humidity. Even though the data appears in the Tooltip it is not illustrated.
The data is provided in this format:
Timestamp;Sensor_ID;Temperature;Humidity;
2019-06-29 11:13:56;1;24.60;51.80;
Here is a fiddle with a "working" example:
https://jsfiddle.net/sHooP_/ky4nha7L/22/
data: {
datasets: [{
type: 'bar',
yAxisID: 'Humidity',
label: 'Humidity',
backgroundColor: window.chartColors.blue,
data: objDataset_Humid_Filtered,
borderColor: 'blue',
borderWidth: 2,
fill: true,
}, {
type: 'line',
yAxisID: 'Temperature',
label: 'Temperature',
backgroundColor: window.chartColors.red,
borderColor: window.chartColors.red,
data: objDataset_Temp_Filtered,
fill: false
}]
}ยด
Thanks for any any answers! I'm starting to get frustrated about this.
I'm also pretty sure my coding is not very clean (Beginner) so if you happen to have any tips feel free!
Best regards,
David
Chart.js lets you add a line to a bar chart, but not a bar to a line chart. So you need to set the chart type to bar, e.g.:
var config = {
type: 'line', // <-- change to 'bar'!
...
I have implemented that example: http://www.highcharts.com/demo/combo without pie chart. I want to add it dynamically after a time later. How can I add a chart into a combo chart dynamically at HighCharts?
If you look the demo you will see that the pie chart isn't a chart, it's just a serie.
So, to add a serie you have to use addSeries passing thrue parameter all the pie serie, like the following.
chart.addSeries({
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: '#4572A7' // Jane's color
},
{
name: 'John',
y: 23,
color: '#AA4643' // John's color
},
{
name: 'Joe',
y: 19,
color: '#89A54E' // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
});
DEMO
You can use charts.push as shown in this url http://calibrate.be/labs/exporting-highcharts-js-pdf-docx-tcpdf-and-phpword
Let me know if you can't have this to work.
EDIT: You will need to define charts as var charts = []; as global variable. And this has not been tested by me.