Trying to draw the XAxis Line in this EChart Stackblitz Demo using Angular and Ngx-Echarts.
This is the line configuration. It works on the Y Axis, however on the X axis the line is not being rendered. Any ideas?
axisLine: {
lineStyle: {
color: 'blue',
width: '4',
},
},
You're missing the show option in the configuration. The docs say it should default to true, but that doesn't appear to be the case in your StackBlitz.
axisLine: {
show: true,
lineStyle: {
color: 'blue',
width: '4',
},
},
Here's a forked StackBlitz.
Related
I have built an internal KPI that uses salesman's names as the legend key at the moment, however I need to use their custom icons as a key with their respective colour border.
I have tried editing the chart.js options: legend field per the documentation, to no avail (see current options and datasets config below.)
datasets: [
{
label: "Salesperson1",
data:totalPointsSalesperson1,
fill: false,
borderColor: 'blue',
},
{
label: "Salesperson2 ",
data:totalPointsSalesperson2,
fill: false,
borderColor: 'red',
},
{
label: "Salesperson3",
data:totalPointsSalesperson3,
fill: false,
borderColor: 'green',
},
{
label: "Salesperson4",
data:totalPointsSalesperson4,
fill: false,
borderColor: 'yellow',
}
],
},
options: {
legend:{
position: 'right',
display: true,
labels: {
padding: 150,
},
},
It seems that changing the point style on the chart is easy, but modifying the legend seems to be quite tricky. Perhaps im missing something blatantly obvious? One more thing to note as that this is a line graph.
Decided to fob off the Chart.js legend config and decided to write my own, i'll close this question down.
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.
http://jsfiddle.net/leongaban/627yamt2/
Docs: http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
Trying to get plotbands to show up, however no luck so far, what am I missing?
This is the only code I added to the forked jsfiddle above:
xAxis: {
dateTimeLabelFormats: {hour: '%I %p', minute: '%I:%M %p'},
plotBands: [{
color: 'red',
from: 1,
to: 2,
value: 3, // Value of where the line will appear
width: 2, // Width of the line
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
},
Trying to get something that looks like this:
I think that you need to use parameters connected with plotBands. Right now some of your parameters are connected with plotLines as well and I think this is causing your issue. Here you can find parameters for plotBands:
http://api.highcharts.com/highcharts#xAxis.plotBands
plotBands: [{
color: 'red',
from: 1265888000000,
to: 1345888000000,
label: {
text: 'I am a label', // Content of the label.
align: 'left' // Positioning of the label.
}
}]
And here you can find live example how your chart can look with plotBands:
http://jsfiddle.net/627yamt2/1/
You can also add plotBands using xAxis.addPlotBand method:
http://api.highcharts.com/highcharts#Axis.addPlotBand
Best regards.
I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/
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.