I'm looking to make this line graph more readable by making one series annotation on top and the other series on the bottom. currently if they are close they are on the same line you can't hover over the other and can't read it. Does anybody know a way to do this?
would post image but site will not allow it so only posting whats important
var options = {
title:'Availibility comparison '+labela+' and '+labelb,
width: 1150,
height: 600,
backgroundColor:'white',
annotation: {style: 'line'},
vAxis: {
minValue: 99.94,
gridlines: {count: 20}
},
series: {
0: {
color: 'blue',
pointSize: 2
},
1: {
color: 'purple',
pointSize: 2
}
},
chartArea: {
width: 950
},
annotation: {
1: {
style: 'none'
}
}
};
Related
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/
I have the chart bellow and I want to add the percentage to the series body. Like I manipulate the image bellow in red.
how Is this possible?
https://codesandbox.io/s/label-line-adjust-forked-09ukre?file=/index.js
var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
renderer: "canvas",
useDirtyRect: false
});
var app = {};
var option;
var datas = [
////////////////////////////////////////
[
{ name: "test1", value: 20 },
{ name: "test2", value: 40 },
{ name: "test3", value: 40 }
]
];
option = {
title: {
text: "test",
left: "center",
textStyle: {
color: "#999",
fontWeight: "normal",
fontSize: 14
}
},
series: datas.map(function (data, idx) {
return {
type: "pie",
radius: [80, 160],
top: "10%",
height: "33.33%",
left: "center",
width: 400,
itemStyle: {
borderColor: "#fff",
borderWidth: 1
},
label: {
alignTo: "edge",
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: "#999"
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
data: data
};
})
};
if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
Thanks
To place information inside the chart, you have to use position: "inside" in the label. Set what is put inside the label with the formatter. (Here, {c} is the value of a data item)
label: {
formatter: "{c}%",
position: "inside"
},
But it seems that it's not possible to have both a label inside AND one outside the same chart (like in your image). However, a workaround can do the job here. Like using 2 identical series except one has the label from your example code, and one has the label code I wrote above. One chart will be on top of the other (wich is a bit messy) but the result will be as you want :
I have doughnut chart using chartsjs, and also I used multi layer with cutoutPercentage.
The First Layer (Black color) is the Total and the second layer (Red Color) complete is the running value.
type: 'doughnut',
data: {
datasets: [
{
data: Total,
fill: true,
backgroundColor:'rbg(242, 133, 0)',
borderWidth: 3,
weight:1,
},{
data: complete,
fill: true,
backgroundColor:'rgb(255,36,0)',
borderWidth: 3,
weight:1,
}
]
},
options: {
responsive: true,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 70,
},
This is what I need,2nd layer is running until reach the total.
In case you need a generic solution, you can use the Plugin Core API and define a beforeInit hook that modifies the chart configuration to fit your needs.
Please take a look at below runnable code and see how it could be done.
new Chart('runningValue', {
type: 'doughnut',
plugins: [{
beforeInit: chart => {
chart.data.datasets = [{
data: [chart.data.total],
backgroundColor: chart.data.totalColor,
borderWidth: 3
},
{
data: [chart.data.complete, chart.data.total - chart.data.complete],
backgroundColor: [chart.data.completeColor, '#fff'],
borderWidth: 3
}
]
}
}],
data: {
total: 50,
complete: 35,
totalColor: 'rbg(242, 133, 0)',
completeColor: 'rgb(255,36,0)'
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
Simply define two values and two background colors on the second dataset as shown in the runnable code below.
const total = 50;
const complete = 35;
new Chart('runningValue', {
type: 'doughnut',
data: {
datasets: [{
data: [total],
backgroundColor: 'rbg(242, 133, 0)',
borderWidth: 3
},
{
data: [complete, total - complete],
backgroundColor: ['rgb(255,36,0)', '#fff'],
borderWidth: 3
}
]
},
options: {
rotation: -90,
circumference: 180,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
cutout: '70%'
}
});
canvas {
max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="runningValue"></canvas>
In this image it is possible to see that there is a line wrap in the text:
Line wrap active on visualization bar chart
How to prevent this?
The code of this chart is:
var data = google.visualization.arrayToDataTable(courseprogressdata);
var options =
{
title: 'Progresso do curso',
chartArea:
{
width: '50%'
},
legend: {
position: 'none'
},
chart:
{
subtitle: 'com valores de 0 a 1'
},
hAxis:
{
minValue: 0,
ticks: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
format: 'percent'
},
bar:
{
groupWidth: "90%"
},
cssClassNames:
{
headerCell: 'googleHeaderCell'
}
};
var chart = new google.visualization.BarChart(document.getElementById('courseprogresschart'));
chart.draw(data, options);
courseprogress is an array with this data:
"[["curso","progresso",{"type":"string","role":"annotation"}],
["PJU",0.7893,"78.93%"],
["Fundgest-GRHN1A",0.1427,"14.27%"],
["asdzxc2",0.0387,"3.87%"]]"
[EDIT] I notice that the line wrap happens only on firefox...
On chrome, everything is OK, see:
Line wrap on chrome are disabled
And just for more information, the content of googleHeaderCell css is:
.googleHeaderCell {}
you could use the following option...
annotations: {
alwaysOutside: true
}
I have the following code to contruct a pie chart.
The problem is i don't get a shadow.
Note : If the chart config, theme='Base', then the pie has a shadow
Ext.define('ChartPanel', {
extend: 'Ext.panel.Panel',
//------------------CONSTRUCTOR
, constructor: function(externalConfigs) {
externalConfigs = externalConfigs || {};
var configs = {
title: 'My panel',
items: [
{
xtype: 'chart',
store: myStore,
width: '30%',
series: [{
type: 'pie'
, field: 'persentage'
, shadow: 'sides'
, showInLegend: false
, donut: false
, renderer: function(sprite, record, attributes, index, store) {
if (record.data.description == 'option1') {
sprite.setAttributes({
fill: 'url(#redGradient)',
stroke: '#ffffff'
}, false);
} else if (record.data.description == 'option2') {
sprite.setAttributes({
fill: 'url(#greenGradient)',
stroke: '#ffffff'
}, false);
}
}
}]
, gradients: [{
id: 'redGradient',
angle: 45,
stops: {
0: { color: '#820000' },
100: { color: '#BD1E00' }
}
}, {
id: 'greenGradient',
angle: 0,
stops: {
0: { color: '#89AC10' },
100: { color: '#A1C22D' }
}
}]
}
]
}
Ext.apply(configs, externalConfigs);
this.callParent([configs]); //Call the parent constructor
}
});
Any ideas how to get a shadow?
Thanks
Use shadow: true (see the docs in the previous link to see other possible options) within your chart definition. (Not within the pie definition). There is no shadow config property for Ext.chart.series.Pie. You would need to use shadowAttributes within Ext.chart.series.Pie.
I found that
return attributes;
inside the renderer is essential.