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.

How to make a Highcharts bar disappear?

I'm trying to think of a way where a user can click a button and cause a Highcharts bar to disappear.
For example, in my Highcharts code here:
$(function(){
Highcharts.setOptions({
colors:['#49acdd'],
chart:{
style: {
fontFamily:'Helvetica',
color:'#384044'
}
}
});
$("#chart").highcharts({
chart: {
type:'column',
backgroundColor:'#158479'
},
title: {
text: "Employer Organizations",
style: {
color: "#8A2BE2" //wmakes the text white
}
},
xAxis: {
tickWidth: 1,
labels: {
style: {
color: '#cc3737'
}
},
categories:[
'Educational and School-Based','Government Orgs','Charitable Foundation Orgs','Health-care Orgs','Market Research Orgs','Technology Firms','Human Service Orgs','Accounting/Finance Firms'
]
},
yAxis: {
gridLineWidth:0, //no gridlines
title: {
text:'',
style:{
color:'#fff'
}
},
labels: {
formatter:function(){
return Highcharts.numberFormat(this.value,0,'', ' ,');//returns ex: 1000 to 1,000
},
style:{
color:'#33FF00'
}
}
},//end of y axis
plotOptions:{
column: {
borderRadius: 4,
pointPadding:0,//paddin between each column or bar
groupPadding:0.1//Padding between each value groups, in x axis units
}
},
series: [{
name: "Employer Organizations",
data: [1,2,3,4,5,6,7,8]
}]
});
});
I know the "plotOptions.bar.events.click" exists for triggering click-based functions, but I'm unable to find a function that lets a Highchart bar disappear when clicked upon.

To disappear particular column in highcharts. Modify your plotOptions
plotOptions: {
column: {
borderRadius: 4,
pointPadding: 0, //paddin between each column or bar
groupPadding: 0.1 //Padding between each value groups, in x axis units
},
series: {
point: {
events: {
click: function() {
if (!confirm('Do you really want to remove this column?')) {
return false;
} else {
this.remove();
}
}
},
}
}
},
Fiddle Demo

Crosshair feature of Zing Chart is leak CPU

When I enable the crosshair feature in my chart, everything works OK in Chrome 56, but when I upgraded Chrome to 57 (even chrome 58 and ZingChart 2.6.0 now), The CPU usage is always above 25% when hovering the chart such as to see a crosshair. When I have 2 charts, CPU usage goes up to 99% and the browser slows and crashes soon after.
I tried disabling all features to see what was the cause of this issue, and when I disable the crosshair, CPU usage is normal again. And if I disable everything but the crosshair feature, the same CPU hogging effect is observed.
The only way to free the resources is by terminating the tab.
Here is my code:
var dataChart = {
id: "ShSDbePYhAxC",
data: {
type: "area",
"crosshair-x": {
"plot-label": {
text: "The %t Series has a value of %v."
}
},
gui: {
behaviors: [
{
id: "Reload",
enabled: "none"
}
],
contextMenu: {
customItems: [
{
function: "zingAlert()",
id: "zingAlert",
text: "zing Alert"
}
]
}
},
item: {
angle: -30
},
legend: {
"background-color": "white",
"border-color": "black",
"border-radius": "5px",
"border-width": 2,
layout: "1xauto",
padding: "10%",
x: "12%",
y: "90%"
},
plot: {
alphaArea: 1,
aspect: "spline",
"bar-width": "15px",
"contour-on-top": false,
lineWidth: "2px",
stacked: true,
marker: {
visible: false
},
tooltip: {
visible: false
}
},
plotarea: {
"margin-bottom": "23%",
"margin-left": "dynamic"
},
"scale-x": {
item: {
angle: -30
},
labels: [
"Name0", "Name1", "Name2", "Name3", "Name4"
]
},
"scale-y": {
label: {
"font-size": "15%",
text: "Number Of Visitors"
}
},
series: [
{
text: "Text A",
values: [11111, 222222, 3333333, 444444, 55555]
},
{
text: "Text B",
values: [6666, 777777, 88888, 99999, 12121212]
}
]
},
height: 550,
output: "canvas",
width: "100%",
}

So we have been leaning to believe this may be a chrome and Angular issue. To confirm this can you revert your zingchart version to an older version like v2.2.2. You can reach this version through the cdn at the following links
Root directory:
http://cdn.zingchart.com/2.2.2/
ZingChart.min:
http://cdn.zingchart.com/2.2.2/zingchart.min.js
Modules:
http://cdn.zingchart.com/2.2.2/modules/
If the problem still happens its a browser and Angular issue and we know where to focus our efforts. If the problem goes away it's directly a ZingChart issue.

how to create a column char with highcharts where each column has a different color

I´ve a chart using highcharts, the only problem is that each column has the same column.
What should I do so each column has a different column.
Here is my code:
var charts = [];
$containers = $('#container1');
var datasets = [
{
name: 'Tokyo',
data: [49, 57]
}];
var cat = ['A', 'B'];
console.log(datasets);
$.each(datasets, function(i, dataset) {
console.log(dataset);
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'column',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
categories: cat,
labels: {
enabled: i === 0
}
},
yAxis: {
allowDecimals: false,
title: {
text: null
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
Thanks in advance.

To have each column be a different color, all you have to do is set the colorByPoint property to true.
Reference:
http://api.highcharts.com/highcharts#plotOptions.column.colorByPoint
Alternatively you can make each column a separate series, which gives you additional levels of control.
OTOH, in the majority of cases, having each column a separate color serves no purpose except to clutter and confuse the data, and make the user work harder cognitively to interpret the chart.
If you want to highlight a single column for a particular reason, you can do that by adding the fillColor property to the data array:
Something like:
data:[2,4,5,{y:9,fillColor:'rgba(204,0,0,.75)',note:'Wow, look at this one'},4,5,6]

I finally found a way to show more than 1 color for each column:
var charts1 = [];
var $containers1 = $('#container1');
var datasets1 = [{
name: 'Dalias',
data: [29]
},
{
name: 'Lilas',
data: [1]
},
{
name: 'Tulipanes',
data: [15]
}];
$('#container1').highcharts({
chart: {
type: 'column',
backgroundColor: 'transparent'
},
title: {
text: 'Montos pedidos por división'
},
tooltip: {
pointFormat: '<span style="color:{series.color};" />{series.name} </span>:<b>{point.y}</b>',
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series : {
cursor: 'pointer',
point: {
events: {
/*click: function() {
verDetalle("Especialidades,"+ this.series.name);
}*/
}
}
}
},
credits:{
enabled: false
},
yAxis: {
min: 0,
title: {
text: ''
}
},
xAxis: {
categories: ['División']
},
series: datasets1
});

HighCharts: Logarithmic Scale for Horizontal Bar Charts

I am working with HighCharts to produce a bar chart. My values can range from as minimal as 0 to as high as 100k (example). Therefore, one bar of the graph can be very small and the other can be very long. HighCharts has introduced the feature of "Logarithmic Scaling". The example of which can be seen HERE
My js code is written in this jsfiddle file. I want to display my horizontal axis (x-Axis) logarithmically. I have inserted the key type as shown in the example but the script goes into an infinite loop which has to be stopped.
What is the flaw in the execution or is logarithmic scaling for HighCharts still not mature?
P.S The commented line in jsfiddle is causing the issue

Since the "official" method is still buggy, you can achieve the log scale more manually by manipulating your input data with a base 10 log and masking your output data raising 10 to the output value. See it in action here http://jsfiddle.net/7J6sc/ code below.
function log10(n) {
return Math.log(n)/Math.log(10);
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
marginRight: 200,
marginLeft: 10,
},
title: {
text: 'Negative'
},
xAxis: {
categories: [''],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high',
},
labels: {
formatter: function() {
return Math.round(Math.pow(10,this.value));
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -50,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return Math.round(Math.pow(10,this.y));
}
}
}
},
credits: {
enabled: false
},
series: [{
"data": [log10(4396)],
"name": "A"},
{
"data": [log10(4940)],
"name": "B"},
{
"data": [log10(4440)],
"name": "C"},
{
"data": [log10(2700)],
"name": "D"},
{
"data": [log10(2400)],
"name": "E"},
{
"data": [log10(6000)],
"name": "F"},
{
"data": [log10(3000)],
"name": "G"},
{
"data": [log10(15000)],
"name": "E"}],
});

It is still experimental according to the Official Documentation, so that might be the case:
"The type of axis. Can be one of "linear" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.
As of 2.1.6, "logarithmic" is added as an experimental feature, but it is not yet fully implemented. Defaults to "linear".
Try it: "linear", "datetime" with regular intervals, "datetime" with irregular intervals, experimental "logarithmic" axis."

For those of you who are still looking for an answer :
JSFiddle : http://jsfiddle.net/TuKWT/76/
Or SO snippet :
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Negative'
},
xAxis: {
categories: ['A','B','C','D','E','F','G','H'],
title: {
text: null
}
},
yAxis: {
type: 'logarithmic',
//min: 0, <= THIS WILL CAUSE ISSUE
title: {
text: null,
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x + ':' + this.y + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
"data": [4396,4940,4440,2700,2400,6000,3000,15000],
}],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>