Echarts - how to get overlayer series to a precise fit - javascript

I'm building a line graph that needs an overlay at a specified point on the x-axis. My current implementation here has an overlay, but I would like it to start and stop at a straight vertical line on the x-axis and also have a smooth top that follows along the line. Has anybody implement something similar to this?
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [0,0,0,0,0,0,0,0.32,0,0,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};

try change data 0 to null
option = {
xAxis: {
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
},
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [null,null,null,null,null,null,null,0.32,0.05,null,null,null],
type: 'line',
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
you can get like this:
Yes, it's not smooth. With smooth, these two series cannot have same smooth top, because the smooth top depends on series data. Apparently, these two series have different series data.
check this below:
BUT, these still other trick to achieve this,
just give you a idea, use two xAxis, the second series have more data points than first series. With more data points, you can use that to simulate same smooth curve.
option = {
xAxis: [{
data: [1,2,3,4,5,6,7,8,9,10,11,12],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}, {
data: [1 ,2,3,4,5,6,7,8,9,10,11,12, 1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4],
boundryGap: false,
axisTick: {
alignWithLabel: true
}
}],
yAxis: {
type: 'value'
},
series: [{
data: [0,0,0,0.003,0.05,0.32,1,0.32,0.05,0.003,0,0],
type: 'line',
smooth: true,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: 'rgba(250,10,10,1)'
}, {
offset: 0.8,
color: 'rgba(250,250,0, 0.2)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
},
{
data: [,,,,,,,,,,,,,,,,,0.32,0.15, 0.075],
type: 'line',
xAxisIndex: 1,
smooth: true,
areaStyle: {
normal: {
color: 'black'
}
},
}]
};
like this:

Related

chart.js cuts data points to half

I have a chart showing website calls the last 7 days. There it is:
Here is the initialization:
varwebsitecalls_chart = new Chart(websitecalls_chartel, {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
min: 0,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
Problem:
The Problem is that the chart cuts of the circles when the data is 0 because I set min to 0. I have to set min to 0 because negative websitecalls can not exist. If I do not set it -1 will be displayed. Is there a way to fix this designtechnical issue?
Thanks in advance,
Filip.
No idea why, but defining y.beginAtZero: true instead of y.min: 0 will solve the problem.
Please take a look at your amended and runnable code and see how it works.
new Chart('websitecalls_chartel', {
type: 'line',
data: {
labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
datasets: [{
label: 'Websitecalls',
data: [0, 0, 0, 0, 0, 0, 0],
borderWidth: 2,
borderColor: '#00000',
backgroundColor: '#ffff',
pointStyle: 'circle',
pointRadius: 7,
cubicInterpolationMode: 'monotone',
tension: 0.4,
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false,
}
},
y: {
beginAtZero: true,
ticks: {
precision: 0,
font: {
family: 'Montserrat',
},
},
grid: {
borderDash: [5, 5],
}
},
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>
Chart.js documentation states...
beginAtZero: if true, scale will include 0 if it is not already included.
min: user defined minimum number for the scale, overrides minimum value from data.

echarts add padding between line chart and y-axis label

I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?
Current line echarts plugin instance view:
Expected line echarts plugin instance view:
The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines
What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?
You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
yAxis: {
type: 'value',
position: 'right',
axisLabel: {
inside: true,
margin: 50,
fontSize: 18
}
},
series: [{
type: 'line',
areaStyle: {
color: 'rgba(104, 216, 214, 0.4)'
},
lineStyle: {
width: 2,
color: 'rgba(104, 216, 214, 1)'
},
data: [120, 132, 101, 134, 90, 230, 210]
}, ]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
var myChart = echarts.init(document.getElementById('main'));
var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
var option = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '10%',
bottom: '15%',
},
xAxis: [{
id: 'xAxis1',
type: 'category',
boundaryGap: false,
data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
axisLine: {
lineStyle: {
shadowOffsetX: 60,
},
},
}],
yAxis: [{
type: 'value',
axisLine: { onZero: false },
position: 'right',
show: true,
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
splitLine: {
lineStyle: {
shadowOffsetX: 60,
shadowColor: '#ccc'
}
},
axisLabel: {
interval: 0,
inside: true,
margin: -45,
fontSize: 16,
padding: [-50, 0, 0, 0],
color: 'black',
showMinLabel: false,
showMaxLabel: false,
},
},{
type: 'value',
position: 'right',
show: true,
offset: 59,
}
],
dataZoom: [{
type: 'inside'
}, {
type: 'slider',
show: true,
bottom: 0
}],
series: [{
id: 'series1',
type: 'line',
yAxisIndex: [0,1],
lineStyle: {
width: 1,
},
label: {},
data: seriesData,
}],
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

Chart.js radar chart ticks are hidden behind the graph

Is it possible to bring the "ticks" of the Chart.js radar graph to the foreground so that they would be on top of the graph itself?
I don't see anything related to this issue in the official documentation.
Method that renders this:
const chart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
datasets: [
{
label: 'Points',
pointRotation: 45,
backgroundColor: [
color(this.chartColors.grey).rgbString(),
color(this.chartColors.green).rgbString(),
color(this.chartColors.blue).rgbString(),
color(this.chartColors.yellow).rgbString(),
],
data: [0, 0, 0, 0],
borderWidth: 0,
pointBackgroundColor: 'rgba(0, 0, 0, 1)'
}
],
},
options: {
responsive: true,
animation: {
animateRotate: true
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
scale: {
ticks: {
fontColor: '#000000',
mirror: true,
}
},
legend: {
position: 'top'
},
}
});
One workaround is to make these fill colours transparent like so:
color(this.chartColors.yellow).alpha(0.5).rgbString(),
...this way the ticks would be somewhat acceptably visible. However, I'd rather have them fully saturated. Thanks in advance for any suggestions.
You can define the scale.ticks.z option as as documented here.
scale: {
ticks: {
...
z: 1
}
},
z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.
Please have a look at your amended code below:
const chart = new Chart('myChart', {
type: 'polarArea',
data: {
labels: ['Silver', 'Palladium', 'Platinum', 'Gold'],
datasets: [
{
label: 'Points',
pointRotation: 45,
backgroundColor: ['grey', 'green', 'blue', 'yellow'],
data: [3, 4, 8, 9],
borderWidth: 0,
pointBackgroundColor: 'rgba(0, 0, 0, 1)'
}
]
},
options: {
responsive: true,
animation: {
animateRotate: true
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
scale: {
ticks: {
fontColor: '#000000',
mirror: true,
z: 1
}
},
legend: {
position: 'top'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

impossible to remove scale from radar chart (chart.js)

I have been trying all day to remove the scale of a radar chart in chart js. Although the chart works just fine, nothing seems to be working to remove the scale. Unfortunately the documentation is not that helpful for that issue.
here is what the graph looks like. The scale looks the same everytime. Clearing cache from browser does not help either.
here is the code for the chart:
function setChart(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['classA','classB','classC','classD'],
datasets: [{
label: 'revenue proportion per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: ['rgba(255, 99, 132, 0.2)'],
borderWidth: 5
},
{
label: 'proportion of item quantity per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: ['rgba(54, 162, 235, 0.2)'],
borderWidth: 5
}
],
and the options:
options: {
scale: {
ticks:{
label: false,
min: 0,
max: 1,
fixedStepSize: 4,
showLabelBackdrop: false,
fontSize: 0,
color: "#eee"
}
}
options: {
scale: {
ticks:{
display: false
}
}
I am doing something stupid? Any help on that would be welcomed!
options: {
scales: {
r: {
pointLabels: {
display: false // Hides the labels around the radar chart
},
ticks: {
display: false // Hides the labels in the middel (numbers)
}
}
}
}
The linear radial axis documentation lists four configuration options (as of v2.9.3):
angleLines
gridLines
pointLabels
ticks
Each of these is an object that supports the display property. Specifying display: false in all four objects removes the scale.
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
Here's a working example:
new Chart('myChart', {
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Series 1',
data: [0.25, 0.3, 0.15, 0.3],
}]
},
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart"></canvas>

ApexChart Column on top of other columns

I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.
var options777 = {
chart: {
id: 'test',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Eligibility',
data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
}],
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
tickPlacement: 'on',
type: 'datetime'
},
yaxis: {
title: {
text: 'Eligibility',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
};
var chart777 = new ApexCharts(
document.querySelector("#myChart"),
options777
);
chart777.render();
When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another?

Categories