I have a line chart with multiple series in 4.02. At different points the series lines cross, I need a specific line to remain as the top line i.e. biggest z-index (so that this line highlights and displays its tips when hovered over as opposed to the other ones).
I do not want to just reorder the sequence that the series are written in the javascript because I need the legend sequence to remain the same (they are all titled as dates and I want to keep them in date order).
I looked for some kind of Ext.chart.series.Line config option to set the z-index but was not successful.
I've already extended the base theme to define custom stroke-widths for the different lines, so I started to look for some kind of theme option to set a series z-index but have not been successful on that either.
Any ideas?
EDIT:
I've added the zindex config to my extended chart theme, this produces no errors but doesn't change anything in the chart at all (the first series listed with z-index 4 is on bottom, z-index 5 is second from bottom, z-index 3 is 3rd from bottom, etc.), seems it's over-ruled somewhere:
// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: ['rgb(0, 0, 0)',
'rgb(0,0,255)',
'rgb(255,0,0)',
'rgb(0,128,0)',
'rgb(128,0,128)'
],
seriesThemes: [{
'stroke-width': 3,
zindex: 4
}, {
'stroke-width': 1,
smooth: false,
zindex: 5
}, {
'stroke-width': 1,
smooth: false,
zindex: 3
}, {
'stroke-width': 1,
smooth: false,
zindex: 2
}, {
'stroke-width': 1,
smooth: false,
zindex: 1
}]
}, config));
}
});
Ok, I sorted it out, zIndex not zindex in the custom theme:
// CUSTOM CHART THEME
Ext.chart.theme.Events = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: ['rgb(0, 0, 0)',
'rgb(0,0,255)',
'rgb(255,0,0)',
'rgb(0,128,0)',
'rgb(128,0,128)'
],
seriesThemes: [{
'stroke-width': 3,
zIndex: 4
}, {
'stroke-width': 1,
smooth: false,
zIndex: 5
}, {
'stroke-width': 1,
smooth: false,
zIndex: 3
}, {
'stroke-width': 1,
smooth: false,
zIndex: 2
}, {
'stroke-width': 1,
smooth: false,
zIndex: 1
}]
}, config));
}
});
Related
I'm trying to hide yAxis labels. I tried display: false property, but that didn't work.
My code below:
export const options = {
responsive: true,
interaction: { includeInvisible: true, intersect: false },
tooltip: {
backgroundColor: "rgba(0, 0, 0, 0.3)",
displayColors: false,
multiKeyBackground: "rgba(0, 0, 0, 0)",
},
scale: {
y1: {
min: 0,
ticks: {
count: 5,
},
grid: { borderDash: [3], color: "rgb(126,126,126)", tickLength: 0 },
},
y2: {
display: false,
position: "right",
max: Math.max(...BTCPrices.map((el) => el.Volume)) * 10,
ticks: {
count: 5,
},
},
x: {
ticks: {},
},
},
plugins: {
legend: {
display: false,
},
},
};
here's the image describing the problem:
Thanks for helping!
This is because your config is not getting picked up, you putted your scale config in the options.scale namespace white it needs to be configured in the options.scales so you need to add an extra s at the end
This is how I manage to get rid of the labels, I think in your case instead of Y its gonna be y2
y: {
ticks: {
display: false, //this will remove only the label
},
},
I have come across this strange problem and would like to know if there is a solution to it. I am using ApexChart Pie Chart to show a breakdown but whenever I go above the 7 number it gives this error. The error does not appear if the series array (see code below) is 7 or less.
Uncaught (in promise) TypeError: t.push is not a function
Here is my code
const [series, setSeries] = useState([8, 17, 3, 3, 3, 3, 10, 34])
const options = {
chart: {
width: 500,
type: 'pie',
foreColor: '#373d3f'
},
labels: ['Alpha', 'Charlie', 'Delta', 'Mike', 'NS', 'Deltaa', 'Mikee', 'er'],
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: "#03111E",
width: 2,
dashArray: 0,
},
responsive: [{
breakpoint: 540,
options: {
chart: {
width: 350
},
legend: {
position: 'bottom'
}
}
}]
}
<Chart options={options} series={series} type="pie" height={360 + Math.random() * 10}
width={550}
style={{margin: "auto"}}/>
Versions
"apexcharts": "^3.35.3",
"react-apexcharts": "^1.4.0",
I have seen some other question related to this but sadly they do not answer the question. I would like to know if there is a solution to this or is this just a limitation of ApexChart. Thank you.
Work fine when you pass stroke colors as array, not string
stroke: {
...
colors: ["#03111E"],
...
}
https://apexcharts.com/docs/options/stroke/#colors
I have a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
I'm creating a line chart using Chart.js. The chart has two datasets. The x-axis is date, and y-axis is the value. When I hover the first data in dataset 1, the first data in dataset 2 is also active(zoom). That isn't I expected. Is there any way to active only the hovered data. And is there any way to active all data by their y value, not by index.
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
https://www.chartjs.org/docs/latest/general/interactions/modes.html
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: '2019-01-15',
y: 100
}, {
x: '2019-02-03',
y: 300
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1
}, {
label: 'Dataset 2',
data: [{
x: '2019-01-03',
y: 150
}, {
x: '2019-01-15',
y: 200
}, {
x: '2019-02-06',
y: 250
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 255, 255, 1)',
borderWidth: 1
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
type: 'time',
position: 'bottom',
time: {
min: "2019-1-1",
max: "2019-2-28",
unit: "month",
displayFormats: {
"month": "YYYY-MM",
}
}
}]
}
}
});
https://jsfiddle.net/t1gmrujo/2/
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
The tooltip configuration controls display of the tooltip popup, not the dataset points. Points are controlled by the hover configuration. This is mentioned on the page you linked (emphasis mine):
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
If you only want the single point you are hovering over to be highlighted, use:
options: {
hover: {
mode: 'point'
}
}
If you want the whole dataset highlighted when hovering any single dataset point, use:
options: {
hover: {
mode: 'dataset'
}
}
If you want to highlight the dataset and see all dataset values in the tooltip, use:
options: {
hover: {
mode: 'dataset'
},
tooltips: {
mode: 'dataset'
}
}
I am using Extjs 4 to create a line chart. Now I want to create a chart series with a dashed line. Currently my code looks the following way:
series: [{
type: 'line',
axis: 'left',
xField: 'name',
yField: 'data1',
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}, ...
I tried setting the 'border-style' to 'dashed' but this neither works.
Is this possible in ExtJs Charting?
You just missed one property to get the dashed lines working. You need to add stroke-dasharray property as well. Here is the updated code:
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3,
'stroke-dasharray': 10 // You need to add this!
},
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
},
You will have to play with the value (10 in my case) to get your desired dash length. Note that this will not work with IE (since its using VML to render the graph). Other browsers should render it properly.
In ExtJS 5.x or 6.x when using sencha-charts (not ext-charts package), stroke-dasharray won't work. After lot of effort, discovered the lineDashed property of Ext.draw.sprite.Sprite works like a charm. So, if you are using sencha-chart package the style config should look like :
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3,
lineDash: [10,10] // Draws dashed lines
}
Hope this will be useful for anyone having problem with sencha-charts.