We Keep Coding

how can I remove space between horizontal lines in apex chart(react)?

I shared my code can anyone help me how can I remove spaces between lines like this in the image
here is my code
`
options: {
grid: {
xaxis: {
lines: {
show: true,
},
},
yaxis: {
lines: {
show: false
}
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false
},
labels: {
show: false,
},}
`

In plotOptions set barHeight to 100% https://apexcharts.com/docs/options/plotoptions/bar/#barHeight
plotOptions: {
bar: {
barHeight: "100%",
horizontal: true
}
},

Unaligned x scales for two Chartjs-chart types with the same configuration - only difference is "chart type" (bar/line)

I built a line chart & a bar chart in Chartjs with exactly the same configuration, but for some reason the x-scales of both charts are different as you can see in the picture below.
The configuration for the both charts is the same, the only difference is the chart type:
function getOptions() {
return {
animation: false,
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: false,
legend: {
display: false
},
title: {
display: false
}
},
elements: {
line: {
fill: true
},
point: {
radius: 0
}
},
scales: {
x: {
type: "time",
time: {
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH'
},
unit: 'minute',
stepSize: 1,
min: '00:00:00',
max: '23:59:59',
},
grid: {
display: true,
drawBorder: true,
drawOnChartArea: true,
drawTicks: true,
color: function(context) {
return '#fff';
},
}
},
y: {
beginAtZero: true,
grid: {
display: true,
drawBorder: false,
color: function(context) {
return '#fff';
},
},
}
}
};
}
I noticed that the x axes do align perfectly, if I set the "stepSize" to 'seconds'. This probably has to do with the fact that the data inserted into the chart is second-data.

This is because the bar chart sets the offset property on the x axis scale to true.
https://www.chartjs.org/docs/3.8.0/axes/cartesian/category.html#common-options-to-all-cartesian-axes
So to align them you either have to set it to false for the bar chart or to true for the line chart

Highcharts - Pie chart legend remains hoverable on second series

I have a chart where I had to build a second series to format the labels for my design brief. In this the data labels on the pie chart show percentages, and the legend shows the labels of the items. Currently my implementation works fine except that the legend is still hoverable, and causes the chart to wash out.
Highcharts.chart({
chart: {
styledMode: true,
renderTo: chart,
events: {},
},
title: {
text: "",
},
credits: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
},
},
enableMouseTracking: false,
},
pie: {
dataLabels: {
distance: 3,
padding: 0,
// crop: false,
// overflow: "allow",
alignTo: "toPlotEdges",
verticalAlign: "middle",
},
},
},
series: [
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: highchartsData,
innerSize: "25%",
showInLegend: false,
size: "95%",
states: {
hover: {
enabled: false,
},
},
},
{
type: "pie",
allowPointSelect: false,
keys: ["name", "y", "selected"],
enableMouseTracking: false,
data: labelData,
showInLegend: true,
states: {
hover: {
enabled: false,
},
},
},
],
});
Currently, this is the behavior:
Not sure what to do to disable this that I haven't already done.

You don't need to use the second series, use instead format for data labels.
series: [{
dataLabels: {
format: '{point.y}%'
},
...
}]
Live demo: http://jsfiddle.net/BlackLabel/jhmfcty3/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.format

Change color of single bar in apex chart

I've some trouble making changes in the bar of color in the apex chart. The chart is a mixed chart (Line/Bar).
I want to change a single bar color.
I've tried the solution is that is to added a fillColor into the series.data as per the apex chart documents but it does not work.
Chart Snap
enter image description here
Here is my code.
where
response.device.data.values AND response.flowmeter.values is a array of values.
if (newChart !== null) {
newChart.destroy();
}
var options = {
chart: {
height: 350,
stacked: false,
height: '400',
toolbar: {
tools: {
download: true,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
customIcons: []
}
}
},
dataLabels: {
enabled: false
},
stroke: {
width: [2, 1],
curve: 'stepline'
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
color: '#008FFB',
}
},
title: {
text: "<?=_('Device(s)')?> (m3)",
style: {
color: '#008FFB'
}
},
tooltip: {
enabled: true
}
},
{
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
color: '#00E396',
}
},
title: {
text: "<?=_('Flowmeter(s)')?> (m3)",
style: {
color: '#00E396',
}
}
},
],
tooltip: {
followCursor: true,
},
legend: {
horizontalAlign: 'center',
offsetX: 40
},
zoom: {
enabled: false
},
xaxis: {
categories: response.device.data.labels,
labels: {
style: {
fontSize: '10px'
}
}
},
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
data: response.flowmeter.values
}
],
};
newChart = new ApexCharts(document.querySelector("#new-chart"), options);
newChart.render();

You can set color prop in the object of the series.
Somethings like that:
series: [
{
name: '<?=_('Device(s)')?>',
type: 'line',
color: "00FA9A",
data: response.device.data.values
},
{
name: '<?=_('Flowmeter(s)')?>',
type: 'bar',
color: "#F44336",
data: response.flowmeter.values
}
],

You could probably make use of passing a function to the fill property. Check this link: https://apexcharts.com/docs/options/fill/. You can also customize based on the series index.

colors: [function({ value, seriesIndex, w }) {
return colors(value)
}],
function colors(id) {
var colors = [
"#33b2df",
"#546E7A",
"#d4526e",
"#13d8aa",
"#A5978B",
"#2b908f",
"#f9a3a4",
"#90ee7e",
"#f48024",
"#69d2e7"
];
return colors[id] ?? '#33b2df';
}

kendo chart grouping error

I have bar chart with grouping dynamic data.
I'm getting data from database with no problem I put my data screenshot below
When i want to bind data on chart i'm grouping data I have data in [Jan,Feb,April]
But chart just shows April on x-axis??? Its grouping wrong and put data wrong place
Here my js code
var stocksDataSource = new kendo.data.DataSource({
data: myDearData,
group: {
field: "MshStok"
},
sort: {
field: "TotalPurchase",
dir: "desc"
}
});
$("#yearly-stock-prices").kendoChart({
dataSource: stocksDataSource,
theme: "flat",
autoBind: false,
seriesDefaults: {
type: "area",
overlay: {
gradient: "none"
},
markers: {
visible: false
},
majorTickSize: 0,
opacity: .8
},
series: [{
field: "TotalPurchase"
}],
valueAxis: {
line: {
visible: true
},
labels: {
template: "#= ChangeFormatMoney(value) #",
skip: 2,
step: 2,
color: "#727f8e"
}
},
categoryAxis: {
field: "Months",
labels: {
format: "MMM",
color: "#727f8e"
},
line: {
visible: true
},
majorTicks: {
visible: false
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # - #= ChangeFormatMoney(value) #"
},
legend: {
visible: true
}
});
Do you have any idea for this?
Thanks

See final entry here: http://www.telerik.com/forums/strange-behaviour-in-category-assignment-grouping-for-charts-bug
Try defining your category field in the series object (series.categoryAxis) instead of the categoryAxis (categoryAcis.field):
series: [{
field: "TotalPurchase",
categoryField: "Months"
}],
DEMO