Good Morning,
Is it possible to read an external variable containing a list within the settings of a HighCharts chart for React-Native?
I'm using the component: "react-native-highcharts".
My code:
import ChartView from 'react-native-highcharts';
render() {
this.state.dadosApi = [10, 10, 1, 3, 4, 6, 5, 7, 18, 19, 2, 13];
var exData = ['2h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
var Highcharts='Highcharts';
var conf={
chart: {
type: 'line',
animation: Highcharts.svg,
marginRight: 10,
tooltipArr: exData,
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
},
credits: {
enabled: false
},
series: [{
type: 'line',
name: 'Linha 1',
data: this.state.dadosApi,
marker: {
enabled: false,
},
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}
tooltip:
{
headerFormat: '',
}
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
}
return (
<ChartView style={{height:300}} config={conf} options={options}></ChartView>
);
The variable "exData" is coming as "undefined". So I can not load in the "tooltip" the value of the hours of each point in the graph.
Is there any way to do this?
I need to load Tooltip values from another list. I load the line with the values from list1. But when I click on the line I want to open a tooltip containing not the value of "line1" but the corresponding value in "list2".
Example: If I click on the "4" position, the value of the line is "6", but I want to show in the tooltip the text of "list2" that is equal to "Test 4".
But the setting says that the value of list2 is empty. How should I proceed to create tooltip this way?
javascript
const tooltips = ['Teste 1','Teste 2','Teste 3','Teste 4','Teste 5','Teste 6','Teste 7','Teste 8','Teste 9','Teste 10','Teste 11','Teste 12'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF']
,
title: {
text: null
},
xAxis: {
categories: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']
},
credits: {
enabled: false
},
series: [{
name: 'Random data',
data: this.state.dataAcionamentos,
marker: {
enabled: false,
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
//showLoading: true,
};
I got it!
My solution just for contribution.
First I create my 2 arrays for the two Series:
for (i in myObj) {
var Label1 = 'Teste 1';
valueP = myObj[i].value;
dataList1.push({
name: Label1,
y: ValueP
});
valueAux1 = myObj[i].value;
valueAux2 = myObj[i].unit;
dataList2.push({
name: valueAux2,
y: valueAux1
});
}
The results:
dataList1 =
[
{ name: 'Teste 1', y: 61.41 },
{ name: 'Teste 1', y: 51.35 },
{ name: 'Teste 1', y: 41.00 },
{ name: 'Teste 1', y: 31.29 },
{ name: 'Teste 1', y: 21.23 },
{ name: 'Teste 1', y: 11.16 },
{ name: 'Teste 1', y: 16.19 },
{ name: 'Teste 1', y: 26.87 },
{ name: 'Teste 1', y: 36.65 },
{ name: 'Teste 1', y: 31.44 },
]
dataList2 =
[
{ name: '1h', y: 61.41 },
{ name: '2h 30m', y: 41.35 },
{ name: '2h 30m', y: 51.00 },
{ name: '22h 30m', y: 36.29 },
{ name: '4h 30m', y: 31.23 },
{ name: '12h 30m', y: 21.16 },
{ name: '4h 30m', y: 18.19 },
{ name: '6h 30m', y: 46.87 },
{ name: '7h 30m', y: 37.65 },
{ name: '9h 30m', y: 30.44 },
]
So I load the graph configuration:
var conf = {
chart: {
type: 'column',
},
title: {
text: null
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(76, 43, 228)']
,
title: {
text: null
},
yAxis: {
title: {
useHTML: true,
text: null
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Bar Chart',
data: dataList1,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.y}</b>'
},
},{
type: 'line',
name: 'Line 1',
data: dataList2,
marker: {
enabled: false,
},
tooltip: {
pointFormat: '<b>{this.series.data.name}</b>'
},
}]
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
In this way the bar chart loads the value {this.series.data.y} in the tooltip and in the line graph loads the value {this.series.data.name}.
For example:
Clicking on position "4" of the bar, loads the value of "31.29" on Tooltip.
Clicking on position "4" of the line, loads the value of "22h 30m" on Tooltip.
Please take a look at the example provided here.
In your case, you defined the config as follows:
var conf = {
chart: {
tooltipArr: exData,
},
series: [{
tooltip: {
pointFormatter: function() {
var toolTip = this.series.chart.options.chart.tooltipArr;
return toolTip[this.x];
}
}
}]
}
In your example, you take the tooltip data from:
var toolTip = this.series.chart.options.chart.tooltipArr;
what might quickly result in one of the accessors being undefined. If you want to customise your tooltip based on the values you receive, I would go with the formatter function. You can check, what is the x and y value, using this.x or this.y.
If you know, what do you want to display in tooltips, I would simply declare a const outside conf object and access in inside tooltip formatter function, as the author of the package does.
const tooltips = ['Tooltip1', 'Tooltip2'];
var conf = {
chart: {
type: 'spline',
},
title: {
text: 'Live random data'
},
tooltip: {
formatter: function () {
return this.y > 0 ? this.series.name : tooltips[0];
}
},
series: [{
name: 'Random data'
}]
}
I am new using this library, and basically I would like to change the texts that are shown in the tooltip and in the label of the bars. I would also like to know how to modify the color of the bars to my liking.
To try to change the text, I am putting an array of test texts so that when I do a hovering on the bar, the text corresponds to the position of the data.
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
this is my code:
var chart = echarts.init(document.getElementById('main'));
var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
'7a', '8a', '9a','10a','11a',
'12p', '1p', '2p', '3p', '4p', '5p',
'6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
'Wednesday', 'Tuesday', 'Monday', 'Sunday'];
var text_toltip=[];
var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
for(var i in data){
text_toltip.push("my text"+i);
}
chart.setOption({
backgroundColor: '#fff',
tooltip: {},
visualMap: {
max: 20,
color: ['#d94e5d','#eac736','#50a3ba']
},
xAxis3D: {
type: 'category',
data: hours
},
yAxis3D: {
type: 'category',
data: days
},
zAxis3D: {
type: 'value',
min: 1
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
environment: 'none',
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
shadow: true
},
ambient: {
intensity: 0
},
ambientCubemap: {
texture: 'asset/pisa.hdr',
diffuseIntensity: 1
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
label: {
show: item[2] != 0
}
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
});
how can I do it?
https://plnkr.co/edit/LZnJdUDRQHdCRKnldWCL?p=preview
So if I understand your questions correctly:
to change visualMap.color property which specifies colors used for gradient
e.g.
visualMap: {
max: 20,
color: ['#00ff00','#0000ff'] // start and end colors for gradient
},
You can add name property to each of your axises
e.g.
yAxis3D: {
type: 'category',
data: days,
name: 'days'
},
to change text of your tooltips you add tooltip with formatter
e.g.
tooltip: {
formatter: 'my custom text and {a}, {b}, {c}, {d} and {e}'
},
alternatively formatter can be provided as a callback:
tooltip: {
formatter: function(params, ticket, callback) {
return "my text, value: " + params.value;
}
}
Using callback you can get detailed text from the server.
I also forked your plnkr: https://plnkr.co/edit/fpyhLHUZ2VAPdeQWnw4E?p=preview
UPDATE: https://plnkr.co/edit/JJMoWpZVhfyQOjdTYDvB?p=preview - this version uses your array of tooltips
Basically what you need in your case is params.dataIndex property:
tooltip: {
formatter: function(params) {
return " " + params.value + ", " + text_toltip[params.dataIndex];
}
},
I'm trying to create a multi-pane chart (like this one http://www.highcharts.com/stock/demo/candlestick-and-volume), with the upper one being a "normal" stacked column chart and the lower one being a "percent" stacked column. But I'm only able to make it both "normal" or both "percent", which is not what I want. Tried a few combinations of plotOptions but couldn't get it to work. Here's the fiddle(http://jsfiddle.net/abhikgo/59k90959/3/): TIA.
var chartData = {"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"bbbBBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"bbb":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"BBB":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"CCC":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"DDD":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]};
var $chart = $('#chartArea').highcharts('StockChart', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{
title: {
text: "Normal Statcking"
},
opposite: false,
height: "65%"
}
,{
title: {
text: "% Stacking"
},
opposite: false,
height: "65%",
top: '65%',
height: '35%',
offset: 0
}
],
plotOptions: {
column: {stacking: 'normal'}
},
series: [{
type: 'column',
name: 'AAA',
data: chartData.AAA
},
{
name: 'bbbBBB',
data: chartData.bbbBBB
},
{
name: 'CCC',
data: chartData.CCC
},
{
name: 'DDD',
data: chartData.DDD
},
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
},
{
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
plotOptions: {
column: {
stacking: 'percent'
}
}
}
]
});
The problem is the way you are trying to set stacking per specific series, this is proper way:
{
name: 'bbb',
data: chartData.bbb,
yAxis: 1,
stacking: 'percent'
}, {
name: 'BBB',
data: chartData.BBB,
yAxis: 1,
stacking: 'percent'
}
See demo: http://jsfiddle.net/59k90959/4/
SOLUTION
I could not find a way to do both chats with the library so I calculated the percentages myself and inserted them as separated series. The only catch was to proper format the tooltips.
var chartData = {
"AAA":[[1414800000000,741],[1414886400000,979],[1414972800000,968],[1415059200000,622],[1415145600000,139],[1415232000000,435],[1415318400000,888]],
"BBB":[[1414800000000,250],[1414886400000,665],[1414972800000,1088],[1415059200000,309],[1415145600000,247],[1415232000000,246],[1415318400000,130]],
"CCC":[[1414800000000,183],[1414886400000,639],[1414972800000,998],[1415059200000,258],[1415145600000,192],[1415232000000,162],[1415318400000,120]],
"DDD":[[1414800000000,67],[1414886400000,26],[1414972800000,90],[1415059200000,51],[1415145600000,55],[1415232000000,84],[1415318400000,10]],
"EEE":[[1414800000000,74],[1414886400000,71],[1414972800000,59],[1415059200000,44],[1415145600000,66],[1415232000000,68],[1415318400000,77]],
"FFF":[[1414800000000,27],[1414886400000,67],[1414972800000,94],[1415059200000,29],[1415145600000,73],[1415232000000,52],[1415318400000,95]]
};
var sumData = [];
$.each(chartData, function(i){
$.each(chartData[i], function(j){
if(!sumData[j]) sumData[j] = 0;
sumData[j] += this[1];
});
});
var percentData = {};
$.each(chartData, function(i){
percentData[i] = [];
$.each(chartData[i], function(j){
percentData[i][j] = [this[0], this[1]/sumData[j]];
});
});
var $chart = $('#chartArea').highcharts('StockChart', {
chart: { type: 'column' },
plotOptions: { column: {stacking: 'normal'} },
tooltip: {
formatter: function(){
console.log(this);
var s = '<span style="font-size: 10px">'+
Highcharts.dateFormat('%A, %b %d, %Y',this.x)+
'</span><br/>';
for(var i = 0; i < sumData.length - 1; i++) {
s += '<br/>' + '<span style="color: ' +
this.points[i].series.color+'">\u25CF</span>' +
this.points[i].series.name + ': ' +
this.points[i].y + 'm ' +
this.points[i].percentage.toFixed(1) + '%';
}
return s;
}
},
xAxis: { type: 'datetime', },
yAxis: [
{//normal
title: {
text: "Normal Statcking"
},
opposite: false,
height: "50%"
},
{//percent
title: {
text: "% Stacking"
},
opposite: false,
top: '50%',
height: '50%',
offset: 0
}
],
series: [
{//normal
name: 'AAA',
data: chartData.AAA
},{
name: 'BBB',
data: chartData.BBB
},{
name: 'CCC',
data: chartData.CCC
},{
name: 'DDD',
data: chartData.DDD
},{
name: 'EEE',
data: chartData.EEE
},{
name: 'FFF',
data: chartData.FFF
},
{//percent
name: 'pAAA',
data: percentData.AAA,
yAxis: 1
},{
name: 'pBBB',
data: percentData.BBB,
yAxis: 1
},{
name: 'pCCC',
data: percentData.CCC,
yAxis: 1
},{
name: 'pDDD',
data: percentData.DDD,
yAxis: 1
},{
name: 'pEEE',
data: percentData.EEE,
yAxis: 1
},{
name: 'pFFF',
data: percentData.FFF,
yAxis: 1
}
]
});
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="chartArea"></div>
</body>
</html>