Develop Reference

How to render Positive, Negative differences as area between two lines in eCharts?

If we have two line charts, comparing say My Portfolio vs Overall Portfolio, the area between two lines need to be highlighted as green where My Portfolio is more than Overall portfolio, and red where it is less.
This is the kind of output that is expected -
var chartDom = document.getElementById('profileAumChart');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
show: false
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['My Portfolio', 'Overall Portfolio']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Jan-21','Feb-21','Mar-21','Apr-21','May-21', 'Jun-21', 'Jul-21', 'Aug-21', 'Sep-21', 'Oct-21', 'Nov-21', 'Dec-21']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'My Portfolio',
type: 'line',
areaStyle: {
color: 'green',
//opacity: 1,
},
data: [150100,175965,185385,201384,206279,235905,238021,239323,245282,247671,255447,275911],
},
{
name: 'Overall Portfolio',
type: 'line',
areaStyle: {
color:'red',
//opacity:1
},
data: [155066,165142,190811,192906,231941,250216,270047,288033,291842,308232,320941,334013],
}
]
};
option && myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.0/dist/echarts.min.js"></script>
<div id="profileAumChart" style="width:100%; height:270px;"></div>

I was able to replicate the effect with an hack. I added a hidden series which has the lowest of the two series, and use the attribute "areastyle" and their sub-attribute color and opacity along with z-index and I am able to show such region.
I am still looking for an elegant solution and in case someone post it would really appreciate it.
I am sharing my code which can help someone who intend to have similar effects using e-charts.
Thanks.
var chartDom = document.getElementById('profileMonthlyNetSales');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
show: false
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['My Portfolio', 'Overall Portfolio'],
left: 'left'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: false
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel:{
margin: 20,
},
data: ['Jan-21','Feb-21','Mar-21','Apr-21','May-21', 'Jun-21', 'Jul-21', 'Aug-21', 'Sep-21', 'Oct-21', 'Nov-21', 'Dec-21']
},
yAxis: [{
type: 'value',
min: -15000,
offset: 10,
axisLabel: {
//formatter: '${value}M'
formatter: function (value, index) {
return '$' + (value/1000) + 'k';
}
}
}
],
series: [
{
z:-1,
name: 'My Portfolio',
type: 'line',
areaStyle: {
color: 'green',
opacity:0.25,
origin: "start",
},
symbolSize: 5,
emphasis:{
disabled:true
},
data: [-6000,-1000,-7500,-7500,15300,16000,4900,5000,800, -9800, -10000, -9000],
},
{
z:-1,
name: 'Overall Portfolio',
type: 'line',
color: "#808080",
areaStyle: {
color:'red',
opacity: 0.25,
origin: "start",
},
symbolSize: 5,
emphasis:{
disabled:true
},
data: [-3000,-4000,-3700,-5000,15000,14800,5000,10200,5000,-9800,-1000,-8000],
},
{
z:-1,
name: 'Overall Portfolio1',
tooltip: {
show: false
},
type: 'line',
areaStyle: {
color:"white",
opacity:1.0,
origin: "start",
},
lineStyle: {
opacity: 0,
},
emphasis:{
disabled:true
},
symbolSize: 0,
data: [-6000,-4000,-7500,-7500,15000,14800,4900,5000,800,-9800,-10000,-9000],
}
],
};
option && myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#5.3.0/dist/echarts.min.js"></script>
<div id="profileMonthlyNetSales" style="width:100%; height:270px;"></div>

I ended up doing something similar to what #Amit Pandey did, but with stacked area charts.
https://echarts.apache.org/examples/en/editor.html?c=area-stack
You find the minimum of the 2 points, and render that as the bottom line/area, then you stack another area chart on top of that bottom line (this values for this stacked chart is the difference between the minimum values and the 'actual' chart value). You can then change the colour of the stacked chart to whatever you want and you can visualize that difference.
This still doesn't solve the issue of line intersects - so if you really want it to look good, you still have to calculate the intersections and add those points in - I ended up using mathjs' intersect function to do this.

Displaying JSON data with Chartjs

First up - most of my development experience is with the back end and, while I have plenty of programming experience in that context, I'm not that familiar with Javascript.
I have managed to produce a REST service that (via GSON) generates JSON populated with data from a database. This data includes a list of two values: a date and a double indicating a temperature for that date. An example of the generated JSON can be found here.
What I'd like to try and do is to take the data and display it in a line chart. I've been trying this with Chartjs with extremely limited success.
The code I'm currently using to try and get the chart working is:
var data = [{"2019-03-30":11.0},{"2019-03-31":10.2},{"2019-04-01":10.0}];
var ctx = document.getElementById("temperatureChart").getContext('2d');
var chart = new Chart(ctx, {
type: "line",
data: {
datasets: [
{
label: "2019",
data: data,
borderColor: "rgb(192,49,62)",
fill: false
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: 'Temperature Averages'
}
}
});
As you can see - I've, for the moment, simply hard coded a few data values in an attempt to try and get it working. All this produces is a chart with nothing on the X Axis and the values -1.0 to 1.0 in .2 increments - screenshot at the bottom of this post.
Honestly, I've no idea how to proceed from here. Is Chartjs even a good choice for this? Starting to wonder if I've bitten off more than I can chew.

Since you also asked "Is Chartjs even a good choice for this?", here is a DevExtreme Charts example:
(modified from devExtreme's sample)
I modified your data from this: (as I mentioned in your question's comments)
[ { "2019-03-30" : 11.0 }, { "2019-03-31" : 10.2 }, { "2019-04-01" : 10.0 }]
to this:
[ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }]
HTML:
<div class="dx-viewport demo-container">
<div id="chart-demo">
<div id="chart"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Series Type</span>
<div id="types"></div>
</div>
</div>
</div>
</div>
CSS:
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.option {
margin-top: 10px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option > span {
margin-right: 10px;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
}
Javascript:
$(function(){
var chart = $("#chart").dxChart({
palette: "Violet",
dataSource: dataSource,
commonSeriesSettings: {
argumentField: "x",
type: types[0]
},
margin: {
bottom: 20
},
argumentAxis: {
valueMarginsEnabled: false,
discreteAxisDivisionMode: "crossLabels",
grid: {
visible: true
}
},
series: [
{ valueField: "y", name: "Temperature" }
],
legend: {
verticalAlignment: "bottom",
horizontalAlignment: "center",
itemTextPosition: "bottom"
},
title: {
text: "Daily Temperature Variations",
subtitle: {
text: "(Celsius)"
}
},
"export": {
enabled: true
},
tooltip: {
enabled: true,
customizeTooltip: function (arg) {
return {
text: arg.valueText
};
}
}
}).dxChart("instance");
$("#types").dxSelectBox({
dataSource: types,
value: types[0],
onValueChanged: function(e){
chart.option("commonSeriesSettings.type", e.value);
}
});
});
var dataSource = [ { x: "2019-03-30", y: 11.0 }, { x: "2019-03-31", y: 10.2 }, { x: "2019-04-01", y: 10.0 }];
var types = ["line", "stackedline", "fullstackedline"];

Highcharts treemap top and left borders missing

I have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<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>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>

I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.

It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/

Update legend colors in ExtJS 6 chart

I have a bar chart with a legend in ExtJS 6.0.2.
I need to update the colors of the bars and of the legend when the user does an action (clicking on a pie slice in my case).
Updating the color of the bars works as intended, but the legend doesn't. Here is an example of what I do right now :
chart.getLegendStore().data.items.forEach(function(x){
x.data.mark = 'rgb(255,255,255)';
});
The colors are correctly set, but they only update when I click on the legend item. I guess it's because ExtJS has no way to know that the underlying store has been modified. I tried going up the callstack with the debugger but I didn't find anything useful.
Is there a better way to do what I want, or/and how to make the legend update instanly ?
EDIT: If it helps, here is how I update the bars :
serie.setConfig("colors", newColors);
EDIT2 : And here is the full chart code :
Ext.define('QuoteBarChart', {
extend: 'Ext.chart.CartesianChart',
alias: 'widget.quotebarchart',
xtype: 'quotebarchart',
requires: [
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Bar',
'Ext.chart.series.Line',
'Ext.chart.theme.Muted',
'Ext.chart.interactions.ItemHighlight'
],
flex: 2,
height: 600,
theme: 'Muted',
itemId: 'chartId',
store: {
type: 'quote'
},
insetPadding: {
top: 40,
bottom: 40,
left: 20,
right: 40
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['won', 'lost', 'open'],
minimum: 0,
grid: true,
titleMargin: 20,
title: 'Offres'
}, {
type: 'category',
position: 'bottom',
label: {
rotate: {
degrees: 45
}
},
fields: ['month']
}
],
series: [{
type: 'bar',
axis: 'left',
xField: 'month',
itemId: 'barId',
yField: ['open','lost','won'],
title: ['Ouvertes', 'Perdues','Gagnées'],
stacked: true,
fullStack: true,
colors: [
'rgb(64, 145, 186)', 'rgb(151, 65, 68)','rgb(140, 166, 64)'
],
highlight: {
strokeStyle: 'red',
fillStyle: 'black'
},
tooltip: {
trackMouse: true,
scope: this,
renderer: function (toolTip, storeItem, item) {
var name = "";
switch(item.field) {
case 'won': name = "Gagnées"; break;
case 'lost': name = "Perdues"; break;
case 'open': name = "Ouvertes"; break;
}
toolTip.setHtml("");
}
}
}],
legend: {
docked: 'bottom',
listeners: {
itemclick: 'onLegendItemClick',
itemmouseenter: 'onLegendItemHover'
}
}
)};

Ok, instead of modify colors of the series and colors of the legend, you can modify all of them in the same time doing this
chart.setColors(['red','blue','green']);
chart.redraw();
So you need to set colors on chart and not on series, and modify the array on button click.

c3js line chart all data unselected how to show tick values

I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present.
The xaxis tick values are of a 'timeseries' type. Thanks!
Here is my c3 config for the line chart:
bindto: '#test',
data: {
x: 'date',
xFormat: '%m%d',
columns: [],
},
legend: {
position: 'bottom',
},
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
},
max: 100,
padding: {
top: 0,
bottom: 0,
},
},
x: {
type: 'timeseries',
tick: {
culling: false,
},
},
},
color: {
pattern: [testRateColor, firstRateColor, secRateColor],
},

Unfortunately this functionality is baked into c3.js and the only way to change this (aside from working purely from d3) is monkey patching. You will find the offender on line 6814 of c3.js:
tickExit = tick.exit().remove(),
If you change this to:
tickExit = function() {},
The ticks are no longer removed.