If word length is too long, I want to show the Vue tooltip or on hover, I need to show the full name of the label. I tried to research a lot, but nothing worked.
https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/# https://github.com/apexcharts/apexcharts.js/issues/2281.
I want when the user hovers on the Y-axis label, I need to show the full text.
I am using bar chart
Here is my response from API
[
{
"name": "Meetings",
"data": [
15,
05,
10,
10,
10,
10,
10,
10,
10,
10
]
},
{
"name": "R & D",
"data": [
10,
10,
10,
10,
10,
10,
10,
10,
10,
10
]
}
]
// **************** Sector Chart ***************** //
export default {
data() {
return {
// teams progress
teamProgressFilter: "week",
teamsOverviewSeries: [],
teamsOverviewOptions: {
chart: {
type: "bar",
height: 456,
stacked: true,
stackType: "100%",
},
plotOptions: {
bar: {
horizontal: true,
barHeight: "40%",
columnWidth: "60%",
},
},
stroke: {
width: 2,
colors: ["#fff"],
},
title: {
text: "",
},
xaxis: {
type:'category',
categories: [],
labels: {
show: false,
},
},
yaxis: {
show: true,
labels: {
show: true,
align: 'left',
minWidth: 50,
maxWidth: 300,
style: {
fontSize: '12px',
},
offsetX: 10,
offsetY: 0,
rotate: 0,
title : "jhashvcshacas sagfuasf ashdgaug ",
formatter: (value) => {
return (value.length > 11)?
value.slice(0,11)+'..':value
},
},
},
tooltip: {
x: {
show: true,
},
y: {
title: {
formatter: (seriesName) => "
<span>" + seriesName + ":</span>",
},
formatter: function (val) {
return val + " hours";
},
},
marker: {
show: false,
},
onDataSetHover: {
highlightDataSeries: false,
},
},
fill: {
type: "pattern",
colors: ["#0081C1", "#FF776A", "#F7B01D"],
pattern: {
opacity: 0.5,
style: "slantedLines",
},
},
legend: {
position: "bottom",
horizontalAlign: "center",
markers: {
radius: 9,
fillColors: ["#0081C1", "#FF776A", "#F7B01D"],
},
},
dataLabels: {
textAnchor: "end",
style: {
fontSize: "12px",
fontFamily: "Source Sans Pro",
colors: ["#0684C3", "#FF776A", "#F7B325"],
},
background: {
enabled: true,
borderRadius: 3,
opacity: 1,
},
},
},
};
},
methods: {
loadTeamOverview() {
return [
{
"name": "Meetings",
"data": [
15,
05,
10,
10,
10,
10,
10,
10,
10,
10
]
},
{
"name": "R & D",
"data": [
10,
10,
10,
10,
10,
10,
10,
10,
10,
10
]
}
];
},
filtered() {
this.loadTeamOverview();
},
departmentArray(departments) {
return departments.map((dept) => dept.department);
//return departments.map((dept) => this.convertToArray(dept.department));
},
},
created: function () {
this.loadTeamOverview();
},
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.js"></script>
<md-card class="bpmt_card mb-15">
<div id="chartTeamProgress">
<apexchart
ref="realtimeChart"
type="bar"
height="400"
:options="teamsOverviewOptions"
:series="teamsOverviewSeries"
></apexchart>
</div>
</md-card>
