I'm having trouble figuring out the best method of adding static shapes to the background of my chart using Apache Echarts. I have a graph that has multiple line series, and I'd like to provide transparent background shapes so that the viewer is able to see how the data falls into the various thresholds over time.
I've figured out how to add shapes to a chart, however I'm having trouble with two things:
Forcing the shapes to fill correctly to the edge of the graph/grid area, and cut off there.
Specifying exact thresholds for the shapes (from what I can tell, currently its based on pixels. I'd like to be able to drop thresholds based on y-axis values.
https://imgur.com/a/gJK91r0
I'm at a bit of a loss for how to achieve this. Listed below is the code I used to generate this graph. This is a link to the editor on apache i used, the code should be there as well.
https://echarts.apache.org/examples/en/editor.html?c=line-simple&lang=ts&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2juisRgJu_LD-VABmYHQAjAAMAKS80Uas2omyqRmh6GCgRABsKUWwAEbAYCUAtuUpISThjCDaEPRi0e4entR04cAKIJkDMfF5tAUTA9m5yenzHrX1wE2wFVXFpduV0ej0Xf4CHFTQvZPo_TeD3rQX9GCrN3jaHd5397DkRAAWACsh1-pAA7hABGBtERUilQWDYNoqBAcnkAEwI3YDBxHAZ4CixKJI2BxCD-fx0DisaqMAAUlVgGKBQJ4sCZKQAdBiAJTBMF2fHoPH3H6TChDWTPV44jwfL4kpH_ZnY4UDSHQ2GwAFq0kotFLZkguWkUW_QnkYnEUnkynU2kMlls40uzk8_nqkXq82TcUDSWPGVvSYKqX-yYqxFgzUwwF6pEG9FELHRm6-95E75e0h2qnSx3053szklj0C35C-5Vga2DxCkjWUJ4KhGKiEWCiPr4oRgESdpIm5kAZiZGIxAPZGKSAA52Ulhy6kgCAOxTipN_GBuj-CDQZTRDP-3v90Twqcsqcrl0Yspz2CLyfMmdrh8pJKbiVeHd7g_1xsoHYADcQA
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
grid: {
left: '10%',
right: '10%',
top: 60,
bottom: 60
},
graphic: [
{
type: 'group',
left: '10%',
right: '10%',
bottom: 60,
top: 60,
children: [
{
type: 'rect',
shape: {
y: 450,
width: 1000,
height: 200,
},
style: {
fill: 'rgba(0, 255, 0, 0.2)'
}
},
{
type: 'rect',
shape: {
y: 200,
width: 400,
height: 250,
},
style: {
fill: 'rgba(255, 255, 0, 0.2)'
}
},
{
type: 'rect',
shape: {
y: 0,
width: 400,
height: 200,
},
style: {
fill: 'rgba(255, 0, 0, 0.2)'
}
}
]
}
],
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [100, 225, 275, 268, 354, 287, 301],
type: 'line'
}
]
};
I ended up figuring out a pretty decent solution to this. Adding data-less series with filled areas works pretty well and is pretty easy to implement.
You can check out the visualization here.
Here's the code:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
},
{
data: [100, 225, 275, 268, 354, 287, 301],
type: 'line'
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(0, 255, 0, 0.2)'
},
data: [
[
{
coord: [, 125]
},
{
coord: [, 0]
}
]
]
}
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(255, 255, 0, 0.2)'
},
data: [
[
{
coord: [, 275]
},
{
coord: [, 125]
}
]
]
}
},
{
type: 'line',
markArea: {
itemStyle: {
color: 'rgba(255, 0, 0, 0.2)'
},
data: [
[
{
coord: [, 275]
},
{
coord: [, ]
}
]
]
}
}
]
};
Related
I have a plotly boxplot chart with array of many values and all works well, but I want to highlight one value.
this is my code
var ebitda_margin_plotly = {
x: data.plotly_data.ebitda_margin,
type: 'box',
name: 'E-MARGIN',
marker: {
color: 'rgba(255, 202, 3, 0.7)',
outliercolor: 'rgba(219, 64, 82, 0.6)',
line: {
outliercolor: 'rgba(219, 64, 82, 1.0)',
outlierwidth: 2
}
},
boxpoints: 'suspectedoutliers'
};
var ebitda_margin_config = {
responsive: true,
modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d'],
displaylogo: false,
autosizable: true
}
var layout_ebitda_margin = {
title: ('EBITDA MARGIN: ' + data.data.ebitda_margin + "%")
};
Plotly.newPlot('ebitda_margin_plotly', [ebitda_margin_plotly], layout_ebitda_margin,ebitda_margin_config);
how can I add line like this blue which will represent my custom value ? in thiscase 11.7% I have from backend
ok I found a solution, which is actually pretty simple
just need to add to layout shapes
var layout_ebitda_margin = {
title: "EBITDA MARGIN",
height: 320,
xaxis: {
rangeslider: {}
},
yaxis: {
showticklabels: false,
fixedrange: true
},
hovermode: 'y unified',
shapes: [
{
type: 'line',
x0: data.data.ebitda_margin,
y0: -1,
x1: data.data.ebitda_margin,
y1: 1,
line:{
color: 'rgb(255, 0, 0)',
width: 1,
dash:'dot'
}} ]
};
I want to add a new value in the tooltip, but I don't want to show the value in the chart. I searched but i did not find any solution. for example:
{
show: false,
name: '利润',
type: 'bar',
label: {
show: true,
position: 'inside'
},
data: [20, 17, 24, 24]
},
{
name: '收入',
type: 'bar',
stack: '总量',
label: {
show: true
},
data: [320, 302, 341, 374]
},
{
name: '支出',
type: 'bar',
stack: '总量',
label: {
show: true,
position: 'left'
},
data: [120, 132, 101, 134]
}
can i add show:false or different things?
my echarts version is ^3.8.5.
Actually this can be done by reformatting your series data and customize tooltip formatter function. You can take a look at this case and make your own adjustment.
For example, data with higher dimension can be added like this:
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
Data with dimension index 0 and 1 will be plotted in the series, but dimension 2 will not shown.
Then make custom tooltip formatter function. For example:
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
Complete example:
option = {
xAxis: {
type: 'category',
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return `
${params.seriesName}:<br />
Day: ${params.value[0]}<br />
Value: ${params.value[1]}<br />
New Value: ${params.value[2]}<br />
`
}
},
series: [{
data: [
['Mon', 120, 0],
['Tue', 200, 1],
['Wed', 150, 2],
['Thu', 80, 3],
['Fri', 70, 4],
['Sat', 110, 5],
['Sun', 130, 6],
],
name: 'MySeries',
type: 'bar'
}]
};
Result:
See on Imgur
maybe custom series it worked but i couldn't find examples about bar chart. there is an example in the site but the example is about gantt chart.
You cannot find this one or similar settings because they should not exist. It's breaking the main dataviz concept: visualization should simplify rather than complicate the perception of data. You cannot to hide the same data for one place and show it in the another in common context. User don't understand what is the reason of this inconsistence and will stop to trusting your chart.
But if you insist, then make the desired like this:
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
]
}
and for hidden series:
series: [
{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
// {...}
]
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: [{
name: '直接访问',
textStyle: {
color: 'red'
}
},
{
name: '邮件营销',
textStyle: {
color: 'green'
}
}
// [...]
],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
series: [{
name: '直接访问',
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0],
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
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>
How to merge the two data as one series in eharts?
here's the code:
option = {
title: {
text: '堆叠区域图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Data1']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Data1',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Data2',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
what I'm trying to do is to merge/combine the two different data in one series and when they are already combine how to define if its data1 or data2?
sample output:
I created a doughnut chart. Is there any chance to make that colors like gradient ? I saw this post, I tried to implement on my own chart but I could not.
Any help, I will be grateful.
var ctx = $('#teamDoughnutChart');
var doughnutBar = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Status",
backgroundColor: [
'rgba(192, 57, 43,1)',
'rgba(244, 187, 18, 1)',
'rgba(41, 128, 185,1)',
'rgba(39, 174, 96,1)',
'rgba(191, 199, 215, 1)'
],
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38, 96, 79, 41]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
<canvas id="teamDoughnutChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a same problem. I found solution. Try this
var canvas = $('#teamDoughnutChart');
var ctx = canvas.getContext('2d');
var gradientColors = [
{
start: '#f3bb98',
end: '#ea8ba9'
},
{
start: '#F6A064',
end: '#ED5384'
}
];
var gradients = [];
gradientColors.forEach( function( item ){
var gradient = ctx.createLinearGradient(0, 0, 150 , 150);
gradient.addColorStop(0, item.start);
gradient.addColorStop(1, item.end);
gradients.push(gradient);
});
var doughnutBar = new Chart(canvas, {
type: 'doughnut',
data: {
labels: ["A", "B"],
datasets: [{
label: "Status",
backgroundColor: gradients,
borderColor: 'rgba(73, 79, 92, 0)',
data: [24, 38]
}]
},
options: {
cutoutPercentage: 70,
maintainAspectRatio: false,
startAngle: 0,
tooltips: {
mode: 'index',
backgroundColor: '#393e48'
},
legend: {
position: 'bottom',
labels: {
fontSize: 12,
padding: 25,
boxWidth: 15
}
}
}
});
I want to create a chart with a bar inside of a stacked bar as seen on the image bellow.
I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?
My code - JsFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
},
title: {
text: 'Test %'
},
xAxis: {
categories: ['2014', '2013', '2012', '2011']
},
yAxis: {
opposite: true,
labels: {
format: '{value}%',
},
},
plotOptions: {
series: {
stacking: 'normal'
},
column: {
stacking: 'percent'
}
},
legend: {
enabled: false
},
series: [{
name: 'red',
type: 'bar',
data: [70, 70, 70, 70],
color: 'rgba(253, 155, 155, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'yellow',
type: 'bar',
data: [5, 5, 5, 5],
color: 'rgba(255, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'green',
type: 'bar',
data: [25, 25, 25, 25],
color: 'rgba(204, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'Value',
type: 'bar',
data: [35, 30, 25, 20],
color: 'rgba(126,86,134,.9)',
pointPadding: 0.35,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
format: '{y}%'
},
}]
});
Any help appreciated.
You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.
Example: http://jsfiddle.net/zs6juetp/2/
plotOptions: {
series: {
grouping: false
...
API reference: plotOptions.bar.grouping
It looks like you're making a bullet graph.
I have examples of this here:
http://jsfiddle.net/jlbriggs/UGs2E/17/
.
plotOptions:{
bar:{
grouping: false,
shadow:false,
borderWidth:0,
pointPadding:.25,
groupPadding:0
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:9,
lineColor:'#333'
}
}
}
Also uses a function to extend the marker object for the target line, on a scatter series:
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};