Crosshair showing wrong data in Apexcharts with React - javascript

Whenever I place the crosshair on a bar in my chart it displays the info of the next one on the left
Crosshair problem
It looks as if the crosshair area has moved to the right because when the cursor is on the bar on the left it shows a cursor but not the crosshair.
I have tried almost everything but I can't figure it out and can't find anyone with the same problem.
This is my code:
const SoldChart = (props) => {
const series = [{
type: "bar",
name: props.seriesName,
data: props.data[0].slice(-12)
}
]
const options = {
chart: { id: props.chartType,
toolbar: {
show: false
}
},
grid: {
show: true,
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
}
},
legend: {
show: true,
onItemClick: {
toggleDataSeries: false
},
onItemHover: {
highlightDataSeries: true
},
},
xaxis: {
categories: props.xName,
labels: {
show: true,
},
tooltip: {
enabled: false,
}
},
yaxis: {
labels: {
show: false,
},
}
}
return (
<div className='dashboard-chart'>
<Chart
options={options}
series={series}
width={props.width}
height={props.height}
/>
</div>
);
};
export default SoldChart;
If anyone can help I would appreciate it!
EDIT: I have figured out it's a problem with the grid. Whenever I set the yaxis lines to show: false it happens. Trying to disable the git doesn't fix the issue.

Related

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
}
},

Chart js: bar width

I want to display data in chart js (version 3.7.1) with horizontal bar chart. Data are loading from backend. My problem is with widht of bar. When I have only a few records, bars are very thick.1 When I have a lot of records (for example 1000) bars are very narrow and are missing label.2 How can you see in images.
I would like have still the same widht for bars and if is a lot of records enable scroll.
There is my code:
createConfig(config: ChartConfigDto): ChartConfiguration {
return {
type: 'bar',
data: {
labels: config.labels,
datasets:
config.datasets.map((dataset, index) => ({
label: dataset.label,
backgroundColor: `${CHART_COLORS[index]}`,
borderColor: `${CHART_COLORS[index]}`,
data: dataset.data,
barThickness: 'flex',
}))
},
options: {
indexAxis: 'y',
plugins: {
title: {
display: true,
text: 'Sites',
},
legend: {
position: 'top',
},
},
responsive: true,
scales: {
x: {
stacked: true,
position: 'top',
},
y: {
stacked: true,
grid: {
display: false,
},
}
},
},
}
}
<div class="modal-body">
<canvas appChart [config]="config"></canvas>
</div>
Thank you for help
There are two properties you can use to achieve.
barThickness
maxBarThickness
You can use maxBarThickness property in the dataset.
Here I'm attaching Stackblitz demo

In Highcharts, my dataLabels disappear when re-enabling the rightmost element of my chart

I'm using react-highcharts to draw a relatively simple column chart for some work data. The bosses wanted it set up so that hiding an item on the legend will adjust the scale, even if the element is in the middle of the chart. I followed this fiddle from the highcharts forum to make my data vanish and reappear. Great, everything works! But I have a bug I can't pin down in my code.
Whenever I remove and then return the rightmost visible element, the second-from-the-right element loses its data label.
I'm reasonably certain that the issue lies in my HighCharts options object. Here it is below:
const highChartsOptionsObject= {
chart: {
type: "column",
style: {
fontFamily: "helvetica",
},
height: 300,
},
title: {
text: null,
},
xAxis: {
allowDecimals: true,
type: "category",
crosshair: true,
},
yAxis: {
min: 0,
title: {
text: getLabel(),
},
labels: {
formatter: getLabelString()
},
},
},
credits: {
enabled: false,
},
legend: {
enabled: true,
},
tooltip: {
formatter: function () {
return `
<b>${this.point.name}</b><br />
${
getTooltip();
}
`;
},
},
plotOptions: {
column: {
stacking: "normal",
pointPadding: 0.3,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
overflow: "none",
formatter: function () {
const labelString = "hard coded test";
return labelString;
},
},
},
series: {
cursor: "pointer",
events: {
legendItemClick: function () {
if (this.visible) {
this.setData([], false);
} else {
let elementData = getSeries()[this.index].data[0];
this.setData([{ ...elementData }], false);
}
},
},
},
},
series: getSeries(),
};
For reference, my other highcharts options are: immutable: true and allowChartUpdate: true
Happy to provide more information if someone thinks that something else is relevant, I just need to sanitize it somewhat to go on SO.
I did some googling, and I identified my issue finally. During transitions, the data labels on the columns overlap. If you have not set allowOverlap to true for data labels, then it will default to false. Since the transition causes overlap, highcharts will set one of the datalabels to be invisible/not show up.
This can be fixed easily enough by just setting:
dataLabels:{
allowOverlap: true
}

Angular highcharts show selected bar in bar chart

I am using highcharts with angular.
Packages I have included
"highcharts": "^8.0.4",
"highcharts-angular": "^2.4.0"
imports in ts
import * as Highcharts from "highcharts";
Markup on HTML
<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions">
</highcharts-chart>
and this is how I am setting chartOptions
private _setChartData(): void {
let _seriesData: Highcharts.PointOptionsObject[];
let _categories: any[];
_seriesData = this._getSeriesData();
_categories = _seriesData.map((_series) => _series.name);
this.chartOptions = {
chart: {
type: "column"
},
title: {
style: { display: "none" }
},
credits: {
enabled: false
},
xAxis: {
crosshair: true,
categories: _categories
},
yAxis: {
min: 0,
title: {
text: "Production Count"
}
},
tooltip: {
headerFormat: `<span style="font-size:10px">{point.key}</span><table>`,
pointFormat: `<tr>
<td style="padding:0"><b>{point.y}</b></td>
</tr>`,
footerFormat: "</table>",
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
showInLegend: false, data: _seriesData, type: "column",
events: { click: (data: any) => this._chartEventHandler(data.point.options) }
}]
};
}
and here is _getSeriesData data
private _getSeriesData(): Highcharts.PointOptionsObject[] {
const data = getData();
const _seriesData: Highcharts.PointOptionsObject[] = [];
data.forEach((_group, index: number) => {
_seriesData.push({
name: _group.name || "Unknown",
y: _group.count,
// selected : index === 1 ? true : false
});
});
return _seriesData;
}
This works fine.
I want to highlight the selcted bar as it shows as of on hover.
There is way to mark bar as selected but it just change the bar color to gray, i want to the highlight effect.
Is there any way to do this?
Enable allowPointSelect option and use brightness property in states.select:
plotOptions: {
column: {
...,
allowPointSelect: true,
states: {
select: {
color: '',
brightness: 0.1
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5008/
API Reference:
https://api.highcharts.com/highcharts/series.column.states.select
https://api.highcharts.com/highcharts/series.column.allowPointSelect

Chart.js - How to remove percentage data labels?

I'm using Chart.js and I want to remove labels with percentage marked with red circle on image below.
I'm using this code to produce this chart:
const options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
type: 'linear',
position: 'left',
id: 'y-axis-1'
}, {
type: 'linear',
position: 'right',
id: 'y-axis-2',
gridLines: {
drawOnChartArea: false
}
}],
}
};
new Chart(document.getElementById('originalThirdChart').getContext('2d'), {
type: 'bar',
data: data,
options: options
});
How can I do this? Thanks in advance!
If you want to remove only the percentages, just add this line in your options
labels: { render: () => {} }
It will look like:
options: {
plugins: {
labels: {
render: () => {}
}
}
}
There must be some logic in your code. ctx.fillText(value + '%', position.x, position.y); like this. I don't see that in your code given code. if it is there, Please remove it. It will work.

Categories