In Kendo UI DataViz, how do I place the labels inside the pie chart - kendo-dataviz

Please refer to this example:
http://jsfiddle.net/mcLEb/
jQuery("#grid").kendoChart(
{
theme: jQuery(document).data("kendoSkin") || "default",
legend:
{
position: "bottom"
},
chartArea: {
height: 200
},
seriesDefaults:
{
labels:
{
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
},
series: [{
type: "pie",
data:[70,20,10]
}],
tooltip:
{
visible: false,
template: "${ category } - ${ value }%"
},
title: { padding: 1, margin: 1 },
seriesColors: ["#d15400", "#d2d2d2","#01619e"],
plotArea: { margin: { left: 50, right: 50 } },
});
More clarification:
Right now, the labels are located outside of the pie chart with an arrow pointing to their corresponding pie section. I want the labels themselves to be inside their corresponding pie section.
I am aware that a pie section could get smaller than the actual text inside of it, but I will handle that.
Thanks in advance!

use the code below (set position as "center")
seriesDefaults:
{
labels:
{
position: "center",
visible: true,
format: "{0}%",
font: "12px Arial",
}
}

The best way I have found to do this is using position insideEnd on the labels.
seriesDefaults:
{
labels:
{
position: "insideEnd",
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}
Another way that was less reliable was to use a negative distance property on the labels.
seriesDefaults:
{
labels:
{
distance: -10,
visible: true,
format: "{0}%",
font: "12px Arial",
center: '5%'
}
}

Related

In Apache Echarts, can inside piechart labels switch automatically to outside if they overlap?

I have a nested pie chart (two pie chart series, one an outer "doughnut" around the other). The inner pie chart needs to mainly use inner-positioned labels, but sometimes there isn't enough room and they overlap:
How can I get this to not overlap? Is there a way to switch the overlapping labels or those that can't fit inside their slices to be outer-positioned instead? Or some other strategy to make these readable? Using 100% outer positioned labels works, but because of the outer pie chart there isn't much room and it's much harder to read because the outer pie chart also has its own set of outer-positioned labels.
Series def:
seriesOpt = [{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 0,
name: "inner",
radius: [0, insideRadius??"40%"],
label: {
show: true,
position: "inside"
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: false
}
},{
encode: {
value: "value",
itemName: "name"
},
type: "pie",
startAngle: 90,
//minShowLabelAngle: 0.05, // buggy, throws internal javascript error
avoidLabelOverlap: true,
datasetIndex: 1,
name: "outer",
radius: [outsideInnerRadius??"60%",outsideOuterRadius??"75%"],
label: {
show: true,
position: "outside",
distanceToLabelLine: 10,
alignTo: "none",
overflow: "truncate",
formatter: '{name|{b}}\n{pct|{d}%}',
rich: {
pct: {
color: '#999'
}
},
labelLine: {
show: true,
length: 60,
length2: 15
}
}]
You should tweak series-pie.labelLayout.
Here is an example:
const data = [
{
name: 'Foo',
value: 10
},
{
name: 'Bar',
value: 20
},
{
name: 'Baz',
value: 15
},
{
name: 'Qux',
value: 500
}
];
let option = {
series: [
{
type: 'pie',
radius: ['120px', '90px'],
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLayout: {
moveOverlap: 'shiftY' // <--- HERE
}
},
{
type: 'pie',
radius: '42px',
center: ['50%', '50%'],
data,
label: {
position: 'inner'
},
labelLine: {
showAbove: true
},
// ========== THERE ==========
labelLayout: {
x: 131,
moveOverlap: 'shiftY'
}
// ====================
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 300px;
height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>

How to remove the top line with highcharts on flutter

how to remove this xasix top line
i want to be like this :
i read a lot of highcharts documents ,but i can't found the answer,I wonder if you have any solutions
my highchars code is:
{
xAxis: {
lineWidth :0,//去掉x轴线
categories: $xAxisData,
tickmarkPlacement: 'on',
gridLineWidth: 1,
gridLineColor: '#808080',
title: {
enabled: false
},
labels: {
style: {
color: '#ffffff'
}
}
},
legend: {
enabled: false
},
yAxis: {
lineWidth: 1,
lineColor: '#808080',
tickmarkPlacement: 'on',
gridLineColor: '#808080',
title: {
text: null
},
labels: {
format: '{value}',
style: {
color: '#ffffff',
fontSize: 12
}
}
},
credits: {
enabled:false
},
tooltip: {
split: false,
valueSuffix: '条'
},
}
Can anyone help me? Thanks a lot!
remove the x axais top line
You can use styled mode to hide grid line on yaxis, article of how to style by css. Catch the last element using CSS pseudo-class :last-of-type and choose how to hide visibility stroke: transparent; or stroke: transparent;.
.highcharts-yaxis-grid path:last-of-type {
/* stroke: transparent; */
stroke-width: 0px;
}
Demo: https://jsfiddle.net/BlackLabel/xdrj846h/

(ApexCharts) How can I make the pie chart the same size?

My Problem : Chart size is fixed including legends.
I want to fixed pie chart size except legends.
How can I make the pie chart the same size?
This is my code.
Help me plz
var options = {
series: [25, 15, 44],
chart: {
type: 'pie',
**width: '300px'**
},
labels: ["Monday", "Tuesday", "Wednesday"],
theme: {
monochrome: {
enabled: true,
color: '#f38200',
shadeIntensity: 0.9
}
},
plotOptions: {
pie: {
size : "200px"
}
},
stroke: {
show: false
},
dataLabels: {
enabled: false
},
legend: {
position: 'bottom',
horizontalAlign: 'left',
markers: {
width: 9, height: 9
},
itemMargin: {
horizontal: 20, vertical: 0
},
formatter: function(seriesName, opts) {
~~~~~~~
return legend;
}
}
};
IMG - This is my problem
Try setting the legend width or height to a static value, e.g.
legend: {
width: 200
}
Try using -
legend: {
floating: true
}
and setting the legend's position using offsets.

ECharts Baidu how to display labels in negative value as positive value?

I am using ECharts Baidu to generate charts. I am using a tornado chart to display the force of left and right arm. The force of the left arm is displayed at the left side and right arm at the right side. Is there a way display the negative value of the label and the axis as positive? I can always hide the axis value so as long as the solution can make the graph to display negative as positive label, I will mark it as solution.
https://echarts.baidu.com/echarts2/doc/example/bar5.html#-en
var option= {
title: {
},
grid: {
top: '10%',
bottom: '25%',
left: '20%',
right: '10%',
},
tooltip: { triggerOn: 'click' },
xAxis: [
{
type: 'value',
name: 'Newton',
nameLocation: 'center',
nameTextStyle: {
padding: 10
},
}
],
yAxis: [
{
axisTick: { show: false },
data: ['FEB']
}
],
barWidth: 40,
series: [
{
type: 'bar',
stack: 'feb',
label: {
normal: {
show: true,
position: 'top',
}
},
data: [{ value: Number(data2[0].left) * -1 }], //the value is from the ajax call
itemStyle: { color: 'gray' }
},
{
type: 'bar',
stack: 'feb',
label: {
normal: {
show: true,
position: 'top'
}
},
data: [Number(data2[0].right)],
itemStyle: { color: '#F26718' },
},
],
textStyle: {
fontWeight: 'bold',
color: 'black'
}
}
chart.setOption(option);
})
try with this:
label: {
normal: {
show: true,
position: 'top',
formatter: function (params) {
return Math.abs(params.value[1]);
}
}
}
this example assumes that the data you passed to the chart is an array like [x, y]. if your input data is different, put a breakpoint inside the formatter function e see how "params" is structured.

Highchart multi Yaxis in one line

I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/