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/
Related
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>
I am using react-Echart for drawing some charts.
but I stucked some problems.
From what I read in the document, If I set proper dimension in series props, I can also use value of that dimensions in labels using formatter props.
However, even if I try many times, the formatter doesn't work properly.
Attached is the option data I used. Please check it out and give me an answer.
const option:EChartsOption = {
title: {
show: false
},
xAxis: {
show: false,
type: 'time'
},
yAxis: {
type: 'value',
position: 'right'
},
// ...
dataset:
{
dimensions: [
'date', 'randomV', 'dailyIncome', 'dailyOutcome', 'percent'
],
source: fakeLineGraphData // [{date:string, randomV:number, dailyIncome: number, dailyOutcome:number , percent: number}]
},
series: [{
dimensions: ['date', 'randomV'],
type: 'line',
symbol: 'none',
showSymbol: false,
markPoint: {
itemStyle: {
color: '#74d527'
},
data: [
{
type: 'max',
name: 'Max',
symbol: 'triangle',
symbolSize: 10,
symbolRotate: 180,
symbolOffset: [0, -20],
label: {
position: 'right',
formatter: `max {c} ({#percent}%)`, // don't works!
color: 'gray'
}
},
{
type: 'min',
name: 'Min',
symbol: 'triangle',
symbolSize: 10,
symbolOffset: [0, 20],
label: {
position: 'right',
formatter: `최저 {c} (-${#percent}%)`, // don't works!
color: 'gray'
}
}
]
},
//...
]
};
Doc which I refered : https://echarts.apache.org/en/option.html#series-line.markPoint.label.formatter
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
I am trying to plot a line chart and a column chart on separate y-axes in highstock using react. However, the line chart is hidden behind the column chart. Could I have the line chart on the column chart as shown in their example dual chart - https://www.highcharts.com/demo/combo-dual-axes?
I've added a link to my chart to clarify my problem.
const chart_options= {
chart: {
zoomType: 'x'
},
title: {
text: ""
},
tooltip:{
split: false,
shared:true,
valueDecimals: 2
},
legend: {
enabled: true,
layout: 'horizontal'
},
series: [
{
name: 'ABC',
type: 'line',
data: this.props.data1,
yAxis:1,
color:'grey',
lineWidth: 3
},
{
name: 'DEF',
type: 'line',
data: this.props.data2,
yAxis:0,
},
{
name: 'GHI',
type: 'column',
data: this.props.data3,
yAxis:0,
color: '#ffd699',
dataGrouping:{
enabled: false
},
pointWidth: 1
},
],
xAxis: {
type: 'datetime',
gridLineWidth:1,
title: {
text: 'Time'
},
tickPixelInterval: 5
},
yAxis: [
{
labels: {
format: '{value:.0f}%',
},
opposite: false,
tickPixelInterval: 20
},
{
title: {
labels: {
format: '{value:.2f}',
},
tickPixelInterval: 20
},
],
}
Could someone please help?
Thanks.
You can set zIndex propert for the series:
series: [{
zIndex: 1,
...
}, {
zIndex: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/x5aefpLv/
API Reference: https://api.highcharts.com/highstock/series.column.zIndex
I am trying to make a pie chart based on the value of variables in the controller plz suggest easiest way to implement this.
You can use
1) Angular chart (using Chart.js)
2) angular directives for commonly used d3 charts
3) AngularJS Directive
4) An AngularJS directive for NVD3 re-usable charting library (based on D3).
5) Google Charts also use with AngularJS
I hope this will help you...
I hope this answer will help you. Using Angular charts you can make a pie chart or any other chart
Angular Chart
npm install angular-chart.js --save
It requires only 2 dependencies angularjs and chartjs
Angular nvD3 chart
{ "chart": {
"type": "pieChart",
"height": 500,
"showLabels": true,
"duration": 500,
"labelThreshold": 0.01,
"labelSunbeamLayout": true,
"legend": {
"margin": {
"top": 5,
"right": 35,
"bottom": 5,
"left": 0
}
}
}
}
You can use Highchart API with angular js
https://www.npmjs.com/package/angular2-highcharts
You can use alos Highchart without angular js to draw Pie chart ->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});