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.
Related
I'm using the library chartJs to display the data that i get from my MySQL database.
In the fucntion below, AddValuesToNavigatorChart takes the browsers data and the percentage data and displays them on the pie chart.
What i need to know, is how to add '%' in my labels ?
I found few answer with getContent('2d').. using the old way, but it's not working.
This is the function :
function AddValuesToNavigatorChart(browsers, percentage) {
checkNavigatorChart()
const data = {
labels: browsers,
datasets: [{
data: percentage,
backgroundColor: [
'rgb(192,192,192)',
'rgb(255,0,0)',
'rgb(0,0,0)',
'rgb(105,105,105)'
],
hoverOffset: 4
}]
};
const config = {
tooltips: {
enabled: false
},
type: 'pie',
data: data,
plugins: [ChartDataLabels],
options: {
showTooltips: false,
plugins: {
datalabels: {
color: 'rgb(255,255,255)',
borderWidth: '2',
align: 'top'
},
legend: {
position: 'bottom',
align: 'center',
labels: {
boxWidth: 12,
padding: 15,
usePointStyle: true,
pointStyle: 'circle'
}
},
title: {
text: 'Navigator Chart',
display: true,
color: 'rgb(0,0,0)',
position: 'top'
}
}
}
};
const NavigatorChart = new Chart(
document.getElementById('NavigatorChart'),
config
);
}
Please provide the version of chartjs that you are using.
Did you mean you want to show the % in the label of the tooltip?
For version v3.8.0, here is a working code I have just made, Link
As in option, you can edit the label of tooltip as you want:
options: {
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
//tooltipItem is for the slice of the pie you are hovering now
return ' ' + tooltipItem.parsed + '%';
},
}
}
}
}
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.
I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
I've been researching without any luck about how to change the x legend color in a Line chart. Do you know how can I do it ?
Attached image of the chart.
You can do this by setting the label property on the axis config, like so:
axes: [{
type: 'numeric',
position: 'left',
fields: ['data1'],
title: {
text: 'Sample Values',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['name'],
title: {
text: 'Sample Values',
fontSize: 15
},
label: {
fill: '#FF0000'
}
}],
I have created a fiddle so that you can see this working. Note that the config item with ExtJs 4 is fill, NOT color as you would expect.
If you try the live code example in the documentation at:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Bar
More than one label looks beautiful:
data: [
{ 'name': 'metric one', 'data':5 },
{ 'name': 'metric two', 'data':27 }
]
However as soon as you reduce the dataset down to one label, the output looks horrible(notice the label for the bar appears half outside the top of the chart area, instead of vertically aligned with the bar it is to label):
Is this a bug in ExtJS? How do I work around this? Exact ExtJS code that produces this output:
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':5 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
One solution is to replace
axisRange = to - from,
on line 383 of Axis.js in ExtJS with
axisRange = to - from == 0 ? 1 : to - from,
to prevent a divide by zero being assigned to the y coordinate of the
axis label.
Yes, the default rendering does look weird when it is just one record.
It can be fixed or worked around though.
In concept, override the series renderer to fix the height and y point in case of single record -
renderer: function(sprite, record, attr, index, store) {
if (store.getCount() == 1) {
attr.height = 80;
attr.y = 75;
}
return attr;
}
You can make changes to the actual overridden values (attr.height and attr.y) to suit your visual needs.
Here is your example modified to look close to what you would expect.
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{'name': 'metric one','data': 5}
//,{'name': 'metric two','data': 7}
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0},
{
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data',
renderer: function(sprite, record, attr, index, store) {
if (store.getCount() == 1) {
attr.height = 80;
attr.y = 75;
}
return attr;
}}]
});
If it seems right, just change the height to 150 from 300 :
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 150,
Updating to ExtJS 4.2 should fixes this.
The problem is not in one bar, it is because of the range so if you have a wide range and one bar the labels will not repeat, it is great to hear that it is fixed in version 4.2 please confirm this if you try it.