I have implemented multi-series doughnut chart using chart.js in react application. I want to show label of each section inside chart as a text in both inner and outer chart. To implement this, I tried chart-js-plugin-labels. But it is working only for the outer chart labels. Does anyone have any solution for that?
Here is one demo application I found similar to my implementation, for the reference.
demo
A part of applying inside text labels for chart is mentioned below:
var refChart = document.getElementById("dchart");
var chartConfig = new Chart(refChart, {
type: 'doughnut',
data: {
datasets: [
{
data: [4, 3, 3, 2],
label: 'data1',
labels: ['A','C','B','C']
},
{
data: [5, 3, 2],
label: 'data2',
labels: ['X','Y','Z'],
}]
},
options:{
responsive: true,
maintainAspectRatio:false,
legend: {
display: true,
position: 'bottom',
}
plugins:{
labels:{
render:"label",
arc:true,
}
}
}
});
The datalabels plugin of chart.js has what you are looking for from what I understand of your explanation:
Example: https://chartjs-plugin-datalabels.netlify.app/samples/charts/doughnut.html
Github: https://github.com/chartjs/chartjs-plugin-datalabels
Related
I have a question about combining column and staked bar for react highchart,
it is similar to the answer of this link:
Highchart combination chart with stacked column
but I want to change the above column to stacked bar which is horizontal.
When I change the defaultColumnSeries to
var defaultColumnSeries = {
type: 'bar',
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
fontSize: '9px'
}
},
showInLegend: false,
groupPadding: 0.1,
yAxis: 1,
xAxis: 1
}
then all the columns become horizontal also which is not what I want.
I want to keep the below columns vertical and the above stacked bar horizontal.
What should I do to achieve it?
Using bar series type enables chart.inverted option, which makes it impossible to use column and bar series types on the same chart. As a solution, you can create another chart and place it on top of the other.
Highcharts.chart('container', {
...
});
Highcharts.chart('container2', {
chart: {
height: 100,
backgroundColor: 'transparent'
},
title: {
text: ''
},
credits: {
enabled: false
},
yAxis: {
visible: false
},
xAxis: {
visible: false
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/k3z5opvr/
API Reference: https://api.highcharts.com/highcharts/chart.inverted
Github issue: https://github.com/highcharts/highcharts/issues/13363
So I'm currently using ant-design charts to plot data which I pull from Django to React. What I wanna do is to fill colors to the background according to the y-axis values. For eg, I want the background color for 15-18 to be red, 18-20 to be yellow, 20-25 to be green and so on and so forth. Here's a screenshot of what I want to achieve:
and what I have so far is a very simple Line chart:
import React from "react";
import { Line } from "#ant-design/charts";
const Graph = (props) => {
var config = {
data: props.data,
padding: "auto",
xField: "Hour",
yField: "Measurement",
yAxis: {
minLimit: 15,
maxLimit: 30,
tickCount: 16,
},
};
return <Line {...config} />;
};
export default Graph;
I've tried finding articles or guides online but is unable to find any. Any help would be appreciated thank you so much!
You can use Region annotations
https://g2plot.antv.vision/en/docs/api/plots/tiny-area#-region-annotation
var config = {
...
annotations: [
{
type: 'region',
start: ['min', 15]
end: ['max', 18],
style: {
fill: '#ff0000'
}
},
{
type: 'region',
start: ['min', 18]
end: ['max', 20],
style: {
fill: '#00ffff'
}
}
...
]
}
I am using column charts given in antd chart library. I understand how customization works and how I can change the color of column giving the fill prop. However if I have two columns grouped together like in this example, how do I specify different colors for both? I also want to give some border radius to the columns, any chance I can do that too?
Here is the antd reference
https://charts.ant.design/zh-CN/demos/column/#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE
And the sandbox
https://codesandbox.io/s/5fshy
TIA
You can use the color and colorField options to set custom colors as defined in the API documentation https://charts.ant.design/demos/column/?type=api#color
working snippet:
var config = {
data: props.data,
xField: 'x',
yField: 'y',
seriesField: 'type',
isPercent: true,
isStack: true,
meta: {
value: {
min: 0,
max: 100,
},
},
label: {
position: 'middle',
content: function content(item) {
return ''.concat(item.y.toFixed(2), '%');
},
style: { fill: '#000' },
},
colorField: 'type', // or seriesField in some cases
color:['#19CDD7','#DDB27C'],
};
return <Column {...config} />;
}
For radius use the columnStyle parameter:
columnStyle: {
radius: [20, 20, 0, 0],
},
i have double doughnut chart in my react js project code. in that double chart dougnut i want to have 3 different labels in 3 different colour, what should i write to make that?
this my code now
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [{
data: [1000],
backgroundColor: [
"#36A2EB"
],
labels: [
'Blue',
]
}, {
data: [400,600],
backgroundColor: [
"#C4D34C",
"#F7464A"
],
labels: [
'Green',
'Red'
],
}],
};
until now with that code the output labels is "blue","green" and "green" again
i want to make 3 different labels in 3 different colour too, anyone can help me?
result :
Ok, so i have read the docs of react-chartjs-2 and their Doughnut Chart does not support rendering two datasets like you want, i came up with this workaround that will help you to achieve what you want.
import React from "react";
import { Doughnut } from "react-chartjs-2";
import { MDBContainer } from "mdbreact";
const App = () => {
var dataDoughnut1 = {
labels: ["Blue", "Green", "Red"],
datasets: [
{
data: [1000, 0, 0],
//You should set here all the other colors desired from the other datasets so it can be interpreted by the component
backgroundColor: ["#36A2EB"],
labels: ["Blue"],
},
{
data: [400, 600],
backgroundColor: ["#C4D34C", "#F7464A"],
labels: ["Green", "Red"],
},
],
};
const options = {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
console.log(tooltipItem.datasetIndex);
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ": " + dataset.data[index];
},
},
},
};
return (
<MDBContainer>
<h3 className="mt-5">Doughnut chart</h3>
<Doughnut data={dataDoughnut1} options={options} />
</MDBContainer>
);
};
export default App;
Here is the result
I am trying to place two Shield UI Charts in the same container. The one chart is line-type and the other- area. However it seems that the second chart is replacing the first one, so as a result I’ve got only the area chart to see. Below is my code:
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
$("#container2").shieldChart(
{
exportOptions:
{
image: false,
print: false
},
primaryHeader: {
text: headerText
},
dataSeries: [
{
seriesType: 'area',
collectionAlias: 'Q Data',
data: localData
}
]
}
);
Each chart is completely and entirely rendered to a container, and to put it simple no other charts can be rendered to it in any given moment. I see you are using a single series charts, so first of all you can simply place the series in one chart.
Or you could simply place another container on the page, since having two containers will visually not reflect the appearance of the charts.