I'm trying to move the labels out of the pie chart, but I can't move them in any way, is there any way i angular to move them out of the pie chart? (Angular v14)
I don't quite understand the documentation so it would be great if someone could help me understand how to do this.
Typescript code:
#ViewChild('chart') chart!: ChartComponent;
public chartOptions: Partial<ChartOptions>;
constructor() {
this.chartOptions = {
series: [45, 50, 22],
chart: {
type: 'pie',
width: '270px',
},
labels: ['Team A', 'Team B', 'Team C'],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 100,
},
},
},
],
legend: {
show: true,
position: 'bottom',
horizontalAlign: 'center',
},
dataLabels: {
offSetY: 50,
// add this part to remove %
enabled: true,
},
};
}
HTML Code:
<div class="chartContainer" style="width: 30%;">
<apx-chart
[series]="chartOptions.series"
[chart]="chartOptions.chart"
[labels]="chartOptions.labels"
[responsive]="chartOptions.responsive"
[legend]="chartOptions.legend"
[dataLabels]="chartOptions.dataLabels">
</apx-chart>
</div>
I tried to put "offset", "offsetY", etc, inside the datalabel, but they didn't move an inch
You can tweak dataLabels and plotOptions.pie.dataLabels in your chartOptions. I give you a basic example (without Angular for practical reasons...):
let options = {
series: [45, 50, 22],
chart: {
type: 'pie',
height: 350
},
labels: ['Team A', 'Team B', 'Team C'],
dataLabels: {
style: {
colors: ['black']
}
},
plotOptions: {
pie: {
dataLabels: {
offset: 60
}
}
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
Related
I want to create the chart mixed chart with line and bar like the below image.
You firstly, import line from the chartjs-2 library. After add two dataset, and indicate one of them is bar chart. type:'bar' .
if you want to add two sides titles, you have to add yAxisID on the datasets. After this, you can put y and y1 axis on the options inside of the scales. Then add titles name in there. Please examine the codes.
Check the result of code:
import React from 'react'
import { Line } from "react-chartjs-2";
function MainChart() {
return (
<>
<Line
data={{
labels: ["1","2", "3", "4", "5"],
datasets: [
{
label: "Line value",
data: [1,2,3,4,5],
borderColor: `rgba(255,200,100, 0.1)`,
backgroundColor: `rgba(255,200,100,0.5)`,
yAxisID: 'y',
},
{
type: 'bar',
label: "bar value",
data: [1,2,3,4,5],
yAxisID: 'y1',
borderColor:"rgb(120, 80, 0, 0.8)",
backgroundColor: "rgb(50, 216, 190, 0.3)",
}
],
}}
options={{
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
ticks: {
color: "rgba(0, 0, 0, 1)",
},
grid: {
drawBorder: true,
drawTicks: true,
color: "rgba(0, 0, 0, 0.2)",
},
title: {
display: true,
text: "Line Title",
font: {
size: 17
},
},
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: "Bar Title",
font: {
size: 15
},
},
},
},
}}
/>
</>
)
}
export default MainChart
USE APEXCHARTS. I tried literally everything and apexcharts was the easiest of all the charts for reactjs. LMK if you have anymore questions!
https://apexcharts.com/react-chart-demos/mixed-charts/line-column/#
NOTE: the doc doesn't mention it but you want to import ReactApexCharts from the library like below.
you're gonna need to convert the class states into functional component states in react which shouldn't be too hard if you know basic React. Here's what your inside code should similarly look like:
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
export default function Graph(props) {
const [options, setOptions] = useState({
chart: {
height: 350,
type: "line",
},
stroke: {
width: [0, 4],
},
dataLabels: {
enabled: true,
enabledOnSeries: [1],
},
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
// xaxis: { DONT NEED THIS, but if you check out the docs they have some useful stuff.
// type: 'datetime'
// },
yaxis: [
{
title: {
text: "Total Number of Sessions",
},
},
{
opposite: true,
title: {
text: "Total Traffic (Gbps)",
},
},
],
});
const [series, setSeries] = useState([
{
name: "Total Number of Sessions",
type: "column",
data: [440, 505, 414, 671, 227]//your data goes here
},
{
name: "Total Traffic (Gbps)",
type: "line",
data: [40, 50, 41, 67, 22]//your data goes here
},
]);
return (
<>
<ReactApexChart
options={options}
series={series}
type='line'
height={350}
/>
</>
);
}
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
In my angularJs project,I have a pie Echarts and I define it like below.The problem is that I may have lots of legend and I see I can use type:'scroll' to make it from here, but I failed and it has no impact.
$scope.pieEcharts1 = {
option: {
title: {
text: 'MyPieChart',
left: 'left',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'right',
type:'scroll',//does not work
data: []
},
label: {
normal: {
show: true,
formatter: '{d}%'
}
},
labelLine: {
normal: {
show: true
}
},
series: [{
name: 'MyData',
type: 'pie',
radius: '62%',
center: ['50%', '50%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
}
}
}
//http request to get data
$scope.pieEcharts1.option.legend.data = nameArray
$scope.pieEcharts1.option.series[0] = dataArray
What is the problem in my code?
The scrollable legned is supported from v3.7.0.
https://echarts.apache.org/zh/changelog.html#v3-7-0
Hell, all,
I would like to draw the chart like this:
Currently, I can use afterBuildTicks to get only zero yAxis. But the problem is that the whole other ticks were removed also. So Not sure if we have a way to draw zero tick and keep other ticks hidden except the label.
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Value 1', 'Value 2', 'Value 3', 'Value 4'],
datasets: [{
label: "Dataset",
data: [20, 15, 27, 18],
backgroundColor: 'rgba(54, 162, 235,0.5)',
}],
},
options: {
responsive: true,
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
position: 'top',
display: true,
gridLines: {
display: true,
},
stacked: true,
ticks: {
fontColor: "#C4C4C4",
fontSize: 10,
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-1',
gridLines: {
display: true,
},
labels: {
show: true
},
stacked: false,
ticks: {
fontColor: "#C4C4C4",
fontSize: 10,
precision: 0,
suggestedMax: 100,
suggestedMin: -100
},
afterBuildTicks:function (axis) {
axis.ticks = [0]
}
}
]
},
tooltips: {
mode: 'label',
bodySpacing: 10,
titleMarginBottom: 10,
titleFontSize: 14,
titleFontStyle: 'bold',
footerAlign: 'right',
callbacks: {
label: (tooltipItem, data) => {
const label = data.datasets[tooltipItem.datasetIndex].label || ''
const value = tooltipItem.value
return ` ${label}: ${value}`
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Thanks so much
I found the solution that use: gridLines options to draw chart with width is zero:
gridLines: {
display: true,
tickMarkLength: 10,
lineWidth: 0
}
i have trying to create a chart like
this. I have tried with highchart.js and chart.js but result is not like expected. Is there any plugin to create a chart like this? Or any other way to stack like this in highchart.js or in chart.js? Thank you.
You can use highcharts Fixed placement columns that is inverted. Check the demo posted below.
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JS:
Highcharts.chart('container', {
chart: {
type: 'column',
inverted: true
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo'
]
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0,
groupPadding: 0.15,
pointPlacement: 0
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.2,
pointPlacement: 0
}]
});
Demo:
https://jsfiddle.net/BlackLabel/g0b9uev5/1/