We Keep Coding

How to reverse colors order for the first label?

I have a horizontal stacked bars with 3 labels with the same order for the colors. I would like to know how can I reverse the color order for the first label only so that it goes from dark blue to dark red and keep the same color flow for label 2 and 3.
https://jsfiddle.net/samwhite/s9yzuqd5/
var colors = ['#93003a', '#f4777f', '#ffb040', '#a5d5d8', '#00429d'];
var def_color = '#d3d3d3';
let labels = [
"In my organization, more emphasis is placed on quantity of work than on the quality of work",
"My Division/Office/Region is making real, meaningful progress on diversity, inclusion, and opportunity in our workplace",
"In my Division/Office/Region, I am given a fair opportunity to work on visible, career-enhancing assignments"
];
// Construct the chart
let chart = Highcharts.chart('container1_1', {
...
yAxis: {
title: { text: 'Response Rate' },
max: 100,
maxPadding: 0,
labels: {
format: '{value}%'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
...
xAxis: {
categories: labels,
labels: {
style: {
fontSize: '1em',
color: '#000',
width: 370,
float: 'left'
}
}
},
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});

Added Color on each data set to work in the color scheme needed based on the index
you can see the reference here: https://api.highcharts.com/highcharts/series.bar.data
{
name: tooltip_titles[s],
color: colors[Math.abs(s - 4)],
y: dept_data["102"][4-s]
},
Old - https://jsfiddle.net/jouwsLn0/
New - https://jsfiddle.net/js1bfxe5/1/
series: [{
name: 'Strongly Agree',
color: colors[4],
data: []
}, {
name: 'Agree',
color: colors[3],
data: []
}, {
name: 'Neither Agree nor Disagree',
color: colors[2],
data: []
}, {
name: 'Disagree',
color: colors[1],
data: []
}, {
name: 'Strongly Disagree',
color: colors[0],
data: []
}]
});
$("#filterOrganization").change(function () {
$(this).find("option:selected")
.each(function () {
var optionValue = $(this).text();
let dept_data = data[optionValue];
chart.series.forEach((series, s) => {
console.log(s);
console.log(dept_data["102"][4-s]);
series.setData([
{
name: tooltip_titles[s],
color: colors[Math.abs(s - 4)],
y: dept_data["102"][4-s]
},
{
name: tooltip_titles[s],
color: colors[s],
y: dept_data["104"][4-s]
},
{
name: tooltip_titles[s],
color: colors[s],
y: dept_data["105"][4-s]
}]);
});
});
}).change();

ECharts how to set different symbol for different marklines in one chart

In echarts, I have a bar chart, I want to add two markLine for it, but for the 'average' line I need the arrow style, for the 'test' line I do not want any symbol at the start and end of the line.
When I use below setting,it will set all markLines without arrow while I want to control each markLine's style separately.
markLine: {
symbol:"none",
data:[]
}
function format(data)
{
data = parseFloat(data);
return data.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
}
var columns_basic_element = document.getElementById("columns_basic");
// Basic columns chart
if (columns_basic_element) {
// Initialize chart
var columns_basic = echarts.init(columns_basic_element);
var data_parts = [12164.58, 13251.94, 21927.18, 13945.88, 13339.14, 21756.32, 19340.50, 22307.53];
var data_labor = [82757.65,97032.46,112864.88,83359.07,85858.48,186564.83,118206.58,132575.22];
//
// Chart config
//
// Options
columns_basic.setOption({
// Define colors
color: ['#5ab1ef', '#d87a80', '#ffb980', '#2ec7c9', '#b6a2de'],
// Global text styles
textStyle: {
fontFamily: 'Roboto, Arial, Verdana, sans-serif',
fontSize: 13
},
// Chart animation duration
animationDuration: 750,
// Setup grid
grid: {
left: 0,
right: 90,
top: 35,
bottom: 0,
containLabel: true
},
// Add legend
legend: {
data: ['Parts', 'Labor'],
itemHeight: 8,
itemGap: 20,
textStyle: {
padding: [0, 5]
}
},
// Add tooltip
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,0.75)',
padding: [10, 15],
textStyle: {
fontSize: 13,
fontFamily: 'Roboto, sans-serif'
}
},
// Horizontal axis
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
}],
// Vertical axis
yAxis: [{
type: 'value',
axisLabel: {
color: '#333'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
color: ['#eee']
}
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return '$' + Intl.NumberFormat().format((value/1000));
}
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.1)', 'rgba(0,0,0,0.01)']
}
}
}],
// Add series
series: [
{
name: 'Labor',
type: 'bar',
data: data_labor,
label: {
normal: {
formatter: function (params) {
var val = format(params.value);
return val;
},
show: true,
//position: 'inside'
},
},
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
fontWeight: 500
}
}
}
},
markLine: {
symbol:"none",
data: [
{
// I want to set symbol:none for this line only
name: 'test',
yAxis:120000 ,
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
},
{
//keep its original style
type: 'average',
name: 'Average',
label: {
position: 'insideEndTop',
normal: {
formatter: '{b}:{c}',
show: true
},
}
}]
}
}
]
});
}
.chart-container {
position:relative;
width:100%;
}
.chart {
position:relative;
display:block;
width:100%;
}
.has-fixed-height {
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div class="chart-container">
<div class="chart has-fixed-height" id="columns_basic"></div>
</div>

I showed to you almost all of possible tweaks without hacking sources, if you need more — try to read by yourself:
Base Concepts
MarkerModel.js
MarkLineView.js
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
data: ["1", "2", "3", "4", "5", "6"]
},{
data: ["1", "2", "3", "4", "5", "6"],
show: false,
}],
yAxis: {},
series: [
{
name: 'Series1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'none',
name: 'max line',
type: 'max',
lineStyle: {
normal: {
type:'solid',
color: 'blue',
}
},
}],
}
},{
name: 'Series2',
type: 'bar',
data: [0,0],
xAxisIndex: 1,
label: { show: false },
markLine: {
symbol: 'none',
data: [{
yAxis: 24,
label: {
normal: {
show: false,
}
},
lineStyle: {
normal: {
type:'dashed',
color: 'green',
}
},
}],
}
}]
}
myChart.setOption(option);
<div id="main" style="width: 600px;height:600px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>

You have mistake with incorrect symbol declaration, do like this:
markLine: {
symbol: 'icon' // <---- it's wrong
data: [{
symbol: 'diamond', // <---- it's right
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
var myChart = echarts.init(document.getElementById('main'));
// Unsert your code below
var option = {
xAxis: {
data: ["1", "2", "3", "4", "5", "6"]
},
yAxis: {},
series: [{
name: 'Series1',
stack: '1',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
markLine: {
data: [{
symbol: 'diamond',
symbolSize: 30,
name: 'average line',
type: 'average'
},{
symbol: 'circle',
symbolSize: 30,
name: 'max line',
type: 'max'
}]
}
}]
}
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

how to understand What is the type of chart displayed in echarts?

I use these options for the chart:
option = {
legend: {},
tooltip: {},
label :{},
toolbox:{ show: true,
feature: {
magicType: {
type: ['bar','line','stack']
},
}},
tooltip :{
show: true,
formatter: params=> {
return params.value[params.value.length-1];
}
},
dataset: {
source: data
},
xAxis: {type: 'category'},
yAxis: {},
series: {type: 'bar'}};
how to change tootlip formatter in when magicType change?

You can use magictypechanged event.
option = {
color: ['#3398DB'],
legend: {},
toolbox: {
feature: {
magicType: {
type: ['line', 'bar', 'stack']
}
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 100,
right: 100,
bottom: 100,
top: 100,
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'test',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.on('magictypechanged', function(e) {
if (e.currentType === "line")
{
myChart.setOption({
legend: {
textStyle: {
color: "#0f0"
}
}
});
}
else {
myChart.setOption({
legend: {
textStyle: {
color: "#000"
}
}
});
}
});
The code above is a modification on this example

you can simply check the component subtype, and display the tooltip based on that.
Although the componentSubType is not documented in the eCharts API, but i found it presented in the formatter's callback parameter
sample code:
formatter: params=> {
if(params.componentSubType == "line")
return "LINE logic";
else if(params.componentSubType == "bar")
return "BAR logic";
else if(params.componentSubType == "stack")
return "STACK logic";
else
return "default logic";
}

Chart.js too slow rendering vertical stacked bars chart

I'm using chart.js API to render a several stacked vertical bars chart, but the performance is slow. I even made some changes such that all the content object was already processed by the server, and not the browser, but I realised the big majority of time comes from the final function new Chart(overallStatsChart, content);.
I also tried switching off animation, which slightly improved performance, but not that much.
Any ideas on how to improve performance, that is, initial loading?
var countryList = {"AR":"Argentina","AU":"Australia","BO":"Bolivia","BR":"Brasil","CA":"Canada","CL":"Chile","CN":"中国","CO":"Colombia","CR":"Costa Rica","CU":"Cuba","CZ":"Česká","DE":"Deutschland","DK":"Danmark","DO":"Rep. Dominicana","EC":"Ecuador","ES":"España","FI":"Suomessa","FR":"France","GR":"Ελλάδα","GT":"Guatemala","HU":"Magyarország","IE":"Ireland","IN":"India","IT":"Italia","JP":"日本","MX":"México","NI":"Nicaragua","NL":"Nederland","NO":"Norge","PA":"Panamá","PE":"Perú","PL":"Polska","PR":"Puerto Rico","PT":"Portugal","PY":"Paraguay","RO":"România","RU":"Россия","SE":"Sverige","SV":"El Salvador","TR":"Türkiye","UA":"Україна","UK":"United Kingdom","US":"USA","UY":"Uruguay","VE":"Venezuela"};
//populates country labels
var labels = [], size = 0;
for (var key in countryList){
labels.push(key);
size++;
}
var _data = function(i){
var arr = [];
for (var n=0; n<size; n++){
arr.push(n==i ? 1 : 0);
}
return arr;
};
var dataset = [], i=0;
for (var key in countryList){
dataset.push(
{
label: "depreciation",
data: _data(i),
backgroundColor: 'navy'
}, {
label: "insurance",
data: _data(i),
backgroundColor: 'blue'
}, {
label: "credit",
data: _data(i),
backgroundColor: 'aqua'
}, {
label: "inspection",
data: _data(i),
backgroundColor: 'teal'
}, {
label: "road taxes",
data: _data(i),
backgroundColor: 'olive'
}, {
label: "maintenance",
data: _data(i),
backgroundColor: 'green'
}, {
label: "repairs",
data: _data(i),
backgroundColor: 'lime'
}, {
label: "fuel",
data: _data(i),
backgroundColor: 'maroon'
}, {
label: "parking",
data: _data(i),
backgroundColor: 'yellow'
}, {
label: "tolls",
data: _data(i),
backgroundColor: 'orange'
}, {
label: "fines",
data: _data(i),
backgroundColor: 'red'
}, {
label: "washing",
data: _data(i),
backgroundColor: 'purple'
}, {
label: "maintenance",
data: _data(i),
backgroundColor: 'green'
}
);
i++;
}
var options = {
maintainAspectRatio: false,
legend: {
position: 'bottom', // place legend on the right side of chart
display: false, //do not display
labels : {
fontSize: 9,
fontColor: 'black'
}
},
scales: {
xAxes: [{
stacked: true, // this should be set to make the bars stacked
beginAtZero: true
}],
yAxes: [{
stacked: true, // this also..
beginAtZero: true
}]
},
animation: {
duration : 1000,
easing : 'linear'
}
};
var content = {
type: 'bar',
data: {
labels: labels,
datasets: dataset
},
options: options
};
//I made tests with timestamps and here it takes the biggest part of the time
new Chart(overallStatsChart, content);
.chart {
position: relative;
margin: auto;
}
#overallStatsChartDiv{
min-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="chart" id="overallStatsChartDiv">
<canvas id="overallStatsChart"></canvas>
</div>

Now I get it :)
I was wrongly duplicating the data attributes, based on this answer.
Solution is quite simple, every data attribute can have directly all the values, without the need of introduction of zeros.
var countryList = {"AR":"Argentina","AU":"Australia","BO":"Bolivia","BR":"Brasil","CA":"Canada","CL":"Chile","CN":"中国","CO":"Colombia","CR":"Costa Rica","CU":"Cuba","CZ":"Česká","DE":"Deutschland","DK":"Danmark","DO":"Rep. Dominicana","EC":"Ecuador","ES":"España","FI":"Suomessa","FR":"France","GR":"Ελλάδα","GT":"Guatemala","HU":"Magyarország","IE":"Ireland","IN":"India","IT":"Italia","JP":"日本","MX":"México","NI":"Nicaragua","NL":"Nederland","NO":"Norge","PA":"Panamá","PE":"Perú","PL":"Polska","PR":"Puerto Rico","PT":"Portugal","PY":"Paraguay","RO":"România","RU":"Россия","SE":"Sverige","SV":"El Salvador","TR":"Türkiye","UA":"Україна","UK":"United Kingdom","US":"USA","UY":"Uruguay","VE":"Venezuela"};
//populates country labels
var labels = [], size = 0;
for (var key in countryList){
labels.push(key);
size++;
}
var _data = function(){
var arr = [];
for (var n=0; n<size; n++){
arr.push(1);
}
return arr;
};
var dataset = [
{
label: "depreciation",
data: _data(),
backgroundColor: 'navy'
}, {
label: "insurance",
data: _data(),
backgroundColor: 'blue'
}, {
label: "credit",
data: _data(),
backgroundColor: 'aqua'
}, {
label: "inspection",
data: _data(),
backgroundColor: 'teal'
}, {
label: "road taxes",
data: _data(),
backgroundColor: 'olive'
}, {
label: "maintenance",
data: _data(),
backgroundColor: 'green'
}, {
label: "repairs",
data: _data(),
backgroundColor: 'lime'
}, {
label: "fuel",
data: _data(),
backgroundColor: 'maroon'
}, {
label: "parking",
data: _data(),
backgroundColor: 'yellow'
}, {
label: "tolls",
data: _data(),
backgroundColor: 'orange'
}, {
label: "fines",
data: _data(),
backgroundColor: 'red'
}, {
label: "washing",
data: _data(),
backgroundColor: 'purple'
}, {
label: "maintenance",
data: _data(),
backgroundColor: 'green'
}
];
var options = {
maintainAspectRatio: false,
legend: {
position: 'bottom', // place legend on the right side of chart
display: false, //do not display
labels : {
fontSize: 9,
fontColor: 'black'
}
},
scales: {
xAxes: [{
stacked: true, // this should be set to make the bars stacked
beginAtZero: true
}],
yAxes: [{
stacked: true, // this also..
beginAtZero: true
}]
},
animation: {
duration : 1000,
easing : 'linear'
}
};
var content = {
type: 'bar',
data: {
labels: labels,
datasets: dataset
},
options: options
};
//I made tests with timestamps and here it takes the biggest part of the time
new Chart(overallStatsChart, content);
.chart {
position: relative;
margin: auto;
}
#overallStatsChartDiv{
min-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="chart" id="overallStatsChartDiv">
<canvas id="overallStatsChart"></canvas>
</div>

How can I add custom text to the bars in echarts and modify the color of the hovering ?

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];
}
},