Related
I am facing problem in inserting a newline character in xAxes labels with chart Js.
Below is the sample code used for formatting xAxes labels
"scales": {
"xAxes": [{
"type" : 'time',
"display": true,
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}]
}
With the above code, the xAxes labels looks like 13:10 - 2022/02/01.
But, I want to be like below:
For multiline labels you will need to proide an array for the label in which each entry is its own line. This can be achieved with the tick callback:
function newDate(milis) {
return moment().add(milis, 'ms');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets: [{
label: "My First dataset",
data: [1, 3, 4, 2, 1, 4, 2],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
callback: (tick) => (tick.split('-'))
},
type: 'time',
time: {
unit: 'millisecond',
stepSize: 5,
displayFormats: {
millisecond: 'HH:mm - YYYY/MM/DD'
}
}
}],
},
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
I have an eChart grid layout with 4 stacked bar charts and cannot figure out how to assign datazoom (nor have I found any examples of this online).
When I place the datazoom before the series, I DO get a zoom controller but only on one of the charts...
dataZoom: [{type: 'inside', start: 50, end: 100},
{start: 50, end: 100 }
}],
series: [{type: 'scatter'...
I won't post code for now (it's large) in hopes that someone can just tell me where to put the datazoom node.
I have no idea why you charts not working. Without example and with complex data you need to call fortune-teller only. In general datazoom can be easily attached to series.
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: [{
type: 'category',
gridIndex: 0
},
{
type: 'category',
gridIndex: 1
}
],
yAxis: [{
gridIndex: 0
},
{
gridIndex: 1
}
],
dataset: {
source: [
['product', '2012', '2013', '2014', '2015', '2016', '2017'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
]
},
grid: [{
bottom: '55%'
},
{
top: '55%'
}
],
series: [{
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2012'
}
}, {
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
encode: {
x: 'product',
y: '2013'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2014'
}
}, {
type: 'bar',
stack: 'st1',
encode: {
x: 'product',
y: '2015'
}
}],
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0, 1],
start: 1,
end: 70
},
{
type: 'inside',
xAxisIndex: [0, 1],
start: 1,
end: 35
},
],
};
myChart.setOption(option);
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
Is there a way to reduce gap between BARS in a bar chart made using Echarts. I tried the option barCategoryGap as mentioned in the docs but it had no effect.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth: 50,
barCategoryGap: '10%'
}]
};
Any idea what is wrong here?
I want to develop an echart that has the area between 2 linecharts highlighted in a color. To achieve this, I made use of stacked area chart. I set the color of the upper area as the highlight color and color of lower area as white so as to achieve my result. However, the color of bigger area is merging with the lower area and producing a diff color. How can I set the colors of 2 areas to not interfere? Is there a way to give z-index to the areas for this?
Here is my code:
option = {
title: {
text: '堆叠区域图'
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
}
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'联盟广告',
type:'line',
smooth: true,
areaStyle: {color: 'red'},
data:[170, 182, 161, 184, 160, 180, 165]
},
{
name:'邮件营销',
type:'line',
smooth: true,
areaStyle: {color: 'white'},
data:[120, 132, 111, 134, 110, 130, 115]
}
]
};
What I have achieved:
You need to increase the opacity of the below chart:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [170, 182, 161, 184, 160, 180, 165],
smooth: true,
type: 'line',
areaStyle: {}
},
{
z: -1, // optional, makes the yAxis' splitLines appear on top
data: [120, 132, 111, 134, 110, 130, 115],
smooth: true,
type: 'line',
areaStyle: {
color: 'rgb(243, 243, 243)', // color of the background
opacity: 1, // <--- solution
},
}
]
};
The above answer only works if the series do not cross the X axis. Here is the configuration that works if your data is both above and below 0 for both upper and lower boundaries:
data = [{
"date": "2012-08-28",
"l": -2.6017329022,
"u": 0.2949717757
},
{
"date": "2012-08-29",
"l": 0.1166963635,
"u": 0.4324086347
},
{
"date": "2012-08-30",
"l": -0.8712221305,
"u": 0.0956413566
},
{
"date": "2012-08-31",
"l": -0.6541832008,
"u": 0.0717120241
},
{
"date": "2012-09-01",
"l": -1.5222677907,
"u": -0.2594188803
},
{
"date": "2012-09-02",
"l": -1.4434280535,
"u": 0.0419213465
},
{
"date": "2012-09-03",
"l": -0.3543957712,
"u": 0.0623761171
}];
myChart.setOption(option = {
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
})
},
yAxis: {
},
series: [
{
z: -1,
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u;
}),
lineStyle: {
opacity: 0
},
areaStyle: {
color: '#ccc',
origin: "start"
},
symbol: 'none'
},
{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l;
}),
lineStyle: {
opacity: 0
},
z: -1,
areaStyle: {
color: "white",
origin: "start",
// opacity: 1
},
symbol: 'none'
}]
});
Create a third series with the difference between the minimum and maximum values. This data series is used only to be able to color the area between minimum and maximum values.
The stackStrategy option works from version v5.3.3
let max = [10, 22, 28, 20, 23];
let min = [8, 15, 23, 18, 19];
let dif = max.map((v, i) => min[i] - v); // [-2, -7, -5, -2, -4]
option = {
xAxis: {
data: ['A', 'B', 'C', 'D', 'E']
},
yAxis: {},
tooltip: {
trigger: 'axis',
},
series: [
{
data: max,
type: 'line',
stack: 'x', // stack name
},
{
data: dif,
type: 'line',
stack: 'x', // stack name
stackStrategy: 'positive', // strategy
lineStyle: {
opacity: 0 // hide line
},
symbol: 'none', // hide symbol
areaStyle: {
color: '#ccc'
},
tooltip: {
show: false // hide value on tooltip
}
},
{
data: min,
type: 'line',
},
]
};
I have a problem with adding different values in tooltips in my chart using React-Native.
We have 3 series of my graph. The first shows the bars and the others are lines.
When I click on the bar I load a tooltip with the value "this.y" which is what I need and it works.
But when I click the in lines I need to load other values into the tooltips.
But I can't load these values. Clicking doesn't open the tooltip.
//Bar data
this.state.barArray = [10.1, 22.5, 33.3, 4.5, 1.5, 26.3, 17, 18.20, 9.2, 0.9, 1, 2];
//Line 1 data
this.state.line1Array = [12.1, 21.5, 23.3, 14.5, 13.5, 16.3, 15, 18.12, 19.2, 10.9, 0, 2.5];
//Line 2 data
this.state.line2Array = [13.1, 18.5, 13.3, 24.5, 19.5, 23.3, 10.3, 16.40, 29.2, 5.9, 21.3, 0];
//X axis of chart
this.state.dias = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
//Here I load 2 arrays with the values. I want to display on each line
var toolTip = ['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 toolTip2 = ['1h 30m','1h 30m','4h 30m','5h 30m','6h 30m','4h 30m','1h 30m','7h 30m','15h 30m','2h 13m','12h 30m','00h 30m'];
Graph configuration.
var conf={
chart: {
type: 'column',
},
yAxis: {
title: {
useHTML: true,
text: null,
},
},
navigation: {
buttonOptions: {
enabled: false
}
},
colors:
['#DA6AFF', 'rgb(71, 40, 213)', 'rgb(172, 143, 242)'], //Bar and lines colors
title: {
text: null
},
xAxis: {
categories: this.state.dias
},
credits: {
enabled: false
},
series: [{
type: 'column', //First serie with bar
name: 'Bar',
data: this.state.barArray,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
return '<b>Value: ' + this.y + '</b>';
}
}
}, {
type: 'line', //Second serie with first line
name: 'Line 1',
data: this.state.line1Array,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
return '<b>' + p + '</b>';
});
}
}
}, {
type: 'line', //Second serie with second line
name: 'Line 2',
data: this.state.line2Array,
marker: {
enabled: false,
},
tooltip: {
useHTML: true,
shared: false,
pointFormatter: function() {
Highcharts.each(toolTip2[this.series.data.indexOf(this)], function(p) {
return '<b>' + p + '</b>';
});
}
}
}],
tooltip: {
headerFormat: '',
},
};
const options = {
global: {
useUTC: false
},
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
};
I did this through the example of this link http://jsfiddle.net/o2zmLngr/5/, but I could not reproduce it in React-Native.
Can anyone help me to create individual tooltips for my chart line and loading information from other arrays?