Related
I'm trying to re-create this example picture using Apache eCharts:
This is what my Apache eCharts version looks like so far:
As you can see, I have almost finished re-creating it.
The only part I can't figure out is how to make the small circle pointer to be a colored circle with white center. The color of the pointer should match the color of axis line it is on.
Currently mine is grey, which doesn't look good.
Here is my code:
const gaugeOption = {
series: [
{
data: gaugeData,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: 'auto', // This doesn't work :(
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 9,
color: [
[0.5, '#e76262'],
[0.54],
[0.66, '#f9cf4a'],
[0.7],
[0.83, '#eca336'],
[0.87],
[1, '#3ece80'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: ['{header|{value}}', '{subHeader|15-30-2022}'].join('\n'),
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
}
EDIT:
I have also tried specifying the colors directly as per below. It makes no difference. The border or the circle pointer remains a grey color:
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: [
[0.5, '#e76262'],
[0.66, '#f9cf4a'],
[0.83, '#eca336'],
[1, '#3ece80'],
],
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 1,
},
},
The only way I can change it's color is to set it to a single static color, but that is not what I want, it should adapt to the color of the axis beneath it.
Set borderColor to a variable. Then change this variable when the gauge value is changed, depending on its new position.
You'll also have to use setOption() to make the change effective on the chart.
//update your variable however you want
myBorderColor = '#f00';
//then make the change to the chart
myChart.setOption({
series: [
{
pointer: {
itemStyle : {
borderColor: myBorderColor
},
},
},
],
});
I am trying to create a scrollbar like the one below using echarts
So far I have managed to get the scroll using dataZoom feature but I haven't been able to style it like a normal scroll bar.
const dataY = [
'a',
'b',
'v',
'd',
'e',
'f',
'x',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n'
]; // 名称
const dataX = [
20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15, 35, 50, 30, 40, 50, 60
]; // 数据
option = {
backgroundColor: '#1C1C1C',
grid: {
top: '10%',
right: '10%',
left: '10%',
bottom: '10%'
},
yAxis: [
{
type: 'category',
data: dataY,
axisLine: {
lineStyle: {
color: '#333333'
}
},
axisLabel: {
interval: 0,
margin: 10,
color: '#999999',
textStyle: {
fontSize: 11
},
rotate: '0'
},
axisTick: {
show: false
}
}
],
xAxis: [
{
axisLabel: {
padding: [3, 0, 0, 0],
formatter: '{value}',
color: '#999999',
textStyle: {
fontSize: 11
}
},
axisTick: {
show: true
},
axisLine: {
lineStyle: {
color: '#333333'
}
},
splitLine: {
lineStyle: {
color: '#333333'
}
}
}
],
dataZoom: [
{
type: 'slider',
yAxisIndex: 0,
zoomLock: true,
width: 5,
right: 10,
top: '10%',
bottom: '10%',
start: 70,
end: 20,
brushSelect: false,
handleSize: '60%',
showDetail: false,
backgroundColor: '#000',
borderColor: '#000',
opacity: 1,
brushStyle: false,
handleStyle: {
color: '#FF6700',
borderColor: '#FF6700'
}
},
{
type: 'inside',
id: 'insideY',
yAxisIndex: 0,
start: 15,
end: 20,
zoomOnMouseWheel: false,
moveOnMouseMove: true,
moveOnMouseWheel: true,
backgroundColor: 'transparent'
}
],
series: [
{
type: 'bar',
data: dataX,
barWidth: '5',
itemStyle: {
normal: {
color: '#FF6700',
shadowBlur: 4,
borderRadius: 100
}
},
label: {
normal: {
show: false,
lineHeight: 4,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#fff',
fontSize: 10
}
}
}
}
]
};
I am left with a weird scrollbar that works as it should be unfortunately looks really weird.
I had the exact same issue as you, and i found a turnaround.
Instead of using the datazoom from ECharts as a scrollbar, you can just use the overflow of the div of the chart, and you can costumize it as you want with css. First you need to comment or delete the part of the datazoom in you code and change the html and css as this:
<div class="grid" [style.width.%]="100" [style.height.%]="100" #wrapper>
<div class="ChartDiv" echarts [options]="options" [style.width.px]="ganttWidth" [style.height.px]="ganttHeight"></div>
</div>
Then you just have to define the css like this:
.grid {
overflow-y: scroll !important;
//hidden if you dont want the x-Axis to have a scroll
overflow-x: hidden !important;
}
//Change the css as you want
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
With this code, your graph will have this aspect:
Now you just need to change your css as you want the style of this xD.
in chartjs is there a way to stack positive and negative numbers in line chart? the problem is that the nagtive number dosnt stack with the positive number iam adding acode that works for stacked of positive numbers but if you change one of the values to a nagitive number you will see it wont work also adding alink to codepen https://codepen.io/natenorberg/pen/WwqRar
var ctx = document.getElementById("myChart").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
const loggedIn = [26, 36, 42, 38, 40, 30, 12];
const available = [34, 44, 33, 24, 25, 28, 25];
const availableForExisting = [16, 13, 25, 33, 40, 33, 45];
const unavailable = [5, 9, 10, 9, 18, 19, 20];
const xData = [13, 14, 15, 16, 17, 18, 19];
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xData,
datasets: [{
label: "Unavailable",
fill: true,
backgroundColor: colors.purple.fill,
pointBackgroundColor: colors.purple.stroke,
borderColor: colors.purple.stroke,
pointHighlightStroke: colors.purple.stroke,
borderCapStyle: 'butt',
data: unavailable,
}, {
label: "Available for Existing",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: availableForExisting,
}, {
label: "Available",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.lightBlue.stroke,
borderColor: colors.lightBlue.stroke,
pointHighlightStroke: colors.lightBlue.stroke,
borderCapStyle: 'butt',
data: available,
}, {
label: "Logged In",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
data: loggedIn,
}]
},
options: {
responsive: false,
// Can't just just `stacked: true` like the docs say
scales: {
yAxes: [{
stacked: true,
}]
},
animation: {
duration: 750,
},
}
});
I'm having trouble on getting the events to work on my chart. I need to get the value of selected area of my parallel coordinates chart. I tried using chartDataRangeSelected but it does nothing when I select some data.
Here's my code:
<div echarts [options]="chartOption" class="demo-chart" (chartInit)="onChartInit($event)" (chartDataRangeSelected)="onChartSelect($event)"></div>
Chart config:
chartOption: EChartOption = {
title: {
text: 'Demo Parallel Coordinates',
subtext: 'data from macrofocus',
left: 'center',
top: 5,
itemGap: 0,
textStyle: {
color: '#000000'
},
z: 200
},
parallelAxis: this.makeParallelAxis(this.schema),
grid: [{
show: true,
left: 0,
right: 0,
top: '0',
bottom: 0,
borderColor: 'transparent',
backgroundColor: 'white',
z: 99
}],
parallel: {
top: '10%',
left: 100,
right: 100,
bottom: 100,
axisExpandable: true,
axisExpandCenter: 15,
axisExpandCount: 10,
axisExpandWidth: 60,
axisExpandTriggerOn: 'mousemove',
z: 100,
parallelAxisDefault: {
type: 'value',
nameLocation: 'start',
nameRotate: 25,
// nameLocation: 'end',
nameTextStyle: {
fontSize: 12
},
nameTruncate: {
maxWidth: 170
},
nameGap: 20,
splitNumber: 3,
tooltip: {
show: true
},
axisLine: {
// show: false,
lineStyle: {
width: 1,
color: '#000000'
}
},
axisTick: {
show: false
},
splitLine: {
show: false
},
z: 100
}
},
series: [
{
name: 'parallel',
type: 'parallel',
smooth: true,
lineStyle: {
color: '#577ceb',
width: 0.5,
opacity: 0.6
},
z: 100,
data: this.rawData
}
]
};
Function:
onChartSelect(e){
console.log(e);
}
Am I using the correct events for doing so? Your help will be much appreciated.
Thanks
according to eCharts document,
the selectDataRange Event emitted after range is changed in visualMap. https://www.echartsjs.com/en/api.html#events.datarangeselected,
which is chartDataRangeSelected of ngx-echarts mapped to.
And you can see that, it is an event related to visualMap. your charts does not have a visual map at all, so i guess the event will not be fired.
You can try chartAxisAreaSelected, as this is more related to your chart.
I need to draw a chart with two yAxis and I also need to stack columns. When I have a single axis, I can stack column three values very well. The problem is when I add a second yAxis (multiple axis) the new three values overlay on the old one. Which results in 6 values in a single stacked column. I don't want this. I wish I could set a different plotOptions to stack the columns according to the new yAxis.
Here is what I tried
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Enveloppe and Effectif in Kinshasa'
},
subtitle: {
text: 'Source: sygecpaf'
},
xAxis: [{
categories: ['Ja', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}Fc',
style: {
color: '#89A54E'
}
},
title: {
text: 'Enveloppe',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Effectifsl',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Total',
color: '#2415cf',
type: 'column',
yAxis: 1,
data: [499, 715, 1064, 499, 715, 1292, 1440, 1760, 1356, 1485, 2164],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Payés',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Non payés',
color: '#c572A7',
type: 'column',
yAxis: 1,
data:[1064, 1941, 956, 544, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544],
tooltip: {
valueSuffix: ''
}
}, {
name: 'Total',
color: '#89A54E',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: ' Fc'
}
}, {
name: 'Payés',
color: '#89A5fE',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: '°C'
}
}, {
name: 'Non Payés',
color: '#72c5A7',
type: 'column',
data: [70, 69, 95, 145, 182, 215, 252, 265, 233, 183, 139, 96],
tooltip: {
valueSuffix: '°C'
}
}]
});
});
Can anyone edit this fiddle to help what I want to do?
Thanks
I Finally solved the issue. In fact, I had to define the stack property within each series
....,{
name: 'leg1',
stack: 'effstack',
yAxis: 1,
data:[...],
},{
name: 'leg2',
stack: 'effstack',
yAxis: 1,
data:[...],
},{
name: 'leg3',
stack: 'otherstack',
yAxis: 0,
data:[...],
},{
name: 'leg4',
stack: 'otherstack',
yAxis: 0,
data:[...],
},...
Here is the new jsfiddle