How to hanlde async data with vue-echarts? - vue.js

I am using vue-echarts along with Apache eCharts.
But I do not know how to load async data values.
I have looked through the examples in the docs and I still can't figure it out.
Can anyone take a look at this SFC and tell me how to update the data value inside the gaugeOption ref?
Currently the gaugeData array loads with a value of 0 and stays that way even though props.totalScore gets updated with a new value.
<template>
<vue-echarts
class="echart-container"
autoresize
:option="gaugeOption"
/>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeData = [
{
value: props.totalScore,
},
];
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeData,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
</script>
<style lang="scss" scoped>
.echart-container {
height: 300px;
max-width: 300px;
margin-top: -135px;
}
</style>
EDIT UPDATE:
I can now get the chart to load correctly using another ref and a watch of the props.
But when the props change it draws a new number ON TOP of the old one. But I need it to replace the old number.
See here how it looks on page load (this is correct):
And see here how it looks when I try to change the gaugeDataRef value (this is wrong, the value is drawn on top of the old one):
Here is the updated code:
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});

Figured it out.
I needed to add a watch on the props that first clears the array and then adds the new value back into the array.
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});
import { computed, ref, watch } from 'vue';
const props = defineProps({
totalScore: {
type: Number,
required: true,
},
reportDate: {
type: String,
required: true,
},
});
const gaugeDataRef = ref<number[]>([]);
watch(props, () => {
gaugeDataRef.value.slice(0, 1);
gaugeDataRef.value.push(props.totalScore);
});
const gaugeOption = ref({
series: [
{
emphasis: {
disabled: true,
},
data: gaugeDataRef.value,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 100,
splitNumber: 3,
radius: '95%',
center: ['50%', '95%'],
pointer: {
icon: 'circle',
length: '12%',
width: 50,
offsetCenter: [0, '-90%'],
itemStyle: {
color: '#FFFFFF',
borderColor: scoreHexColor,
borderWidth: 5,
shadowColor: 'rgba(10, 31, 68, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0.1,
},
},
axisLine: {
show: true,
roundCap: true,
lineStyle: {
width: 10,
color: [
[0.48, '#ee6352'],
[0.52],
[0.66, '#ff8b3b'],
[0.7],
[0.83, '#fac05e'],
[0.87],
[1, '#59cd90'],
],
},
},
axisTick: {
length: 2,
lineStyle: {
color: '#8a94a6',
width: 2,
},
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
title: {
show: false,
},
detail: {
rich: {
header: {
fontSize: 36,
fontWeight: 700,
fontFamily: 'Open Sans',
color: '#0a1f44',
},
subHeader: {
fontSize: 16,
fontWeight: 400,
fontFamily: 'Open Sans',
color: '#8a94a6',
},
},
formatter: (value: number) => {
return `{header|${value}}\n{subHeader|${props.reportDate}}`;
},
offsetCenter: [0, '-20%'],
valueAnimation: true,
},
},
],
});

Related

Remove empty space around a barchart with no axes showing in Chartjs

Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0

chart js showing different width of bar

I am creating simple bar chart using Chartjs in Vue
<bar-chart
:data="[40, 19, 3, 5,]"
:labels="['0-30 days', '31-60 days', '61-90 days', '90+']"
:colors="['blue', 'blue', 'blue', 'blue']"
></bar-chart>
and the code for this is
createChart(chartData: object) {
const canvas = document.getElementById('bar') as HTMLCanvasElement;
const myopt = {
deferred: {
xOffset: '50%',
delay: 250,
},
plugins: {
datalabels: {
align: 'top',
anchor: 'end',
color: 'blue',
},
},
legend: {
display: true,
},
title: {
display: true,
text: 'Chart.js - Different Bar Colors',
},
tooltips: { enabled: true },
responsive: true,
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: '',
},
offset: false,
color: 'rgba(0, 0, 0, 0)',
gridLines: {
drawOnChartArea: false,
},
}],
yAxes: [{
id: 'y-axis-0',
mirror: false,
stacked: true,
offset: false,
callback(label:any, index:any, labels:[]) {
return `${label}%`;
},
ticks: {
beginAtZero: true,
min: 0,
},
gridLines: {
display: true,
color: 'rgba(0, 0, 0, 0)',
drawOnChartArea: false,
},
}],
},
};
const options = {
type: 'bar',
data: chartData,
options: myopt,
};
new Chart(canvas, options);
}
the chart which this is generating is not equidistant sharing image for reference
position and width of the bar is incorrect and also I want to know if there is any way by which i can customize labels for y axis e.g. instead of 40,35,30... it will be ** 40k,35k,30k** in y axis
If any one has worked on this case please help
You can make use of the tick callback for your K at the end (https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats)
var ctx2 = document.getElementById("stack-chart");
var stackChart1 = new Chart(ctx2, {
type: 'bar',
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: (val) => (val + 'k')
}
}]
},
legend: {
display: false,
labels: {
fontSize: 20,
fontColor: '#595d6e',
}
},
tooltips: {
enabled: false
}
},
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
backgroundColor: "#5e63b4",
data: [20, 30, 40, 50, 60]
}]
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="stack-chart" width="1360" height="450"></canvas>

ECharts - how to inject value from props?

I have the following Chart Component:
<template>
<div class="gauge-chart">
<chart :options="options"></chart>
</div>
</template>
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data: () => ({
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
}),
};
</script>
As you can see I am tryng to inject chartValue and chartName props into options.series.data.value and options.series.data.name respectively.
The values for the properties are coming from
<GaugeChart chartName="Sleep" :chartValue="2" />
At the moment the values are hardcoded, but eventually they will be dynamic.
However it keep throwing the following error:
"TypeError: Cannot read property 'chartName' of undefined"
"TypeError: Cannot read property 'chartValue' of undefined"
I have done a colsole.log of both properties and they come up as "Sleep" and 2. I have also done a typeof on both property names and they both come up as String and Number, respectively.
Could somebody tell me where I am going wrong please?
Many thanks in advance.
You cannot use 'this' operator inside an arrow function so define your data section as a normal function
<script>
export default {
props: {
chartValue: { type: Number, required: true },
chartName: { type: String, required: true },
},
data() {
return {
options: {
series: [
{
type: "gauge",
startAngle: 180,
endAngle: 0,
min: 1,
max: 5,
splitNumber: 8,
axisLine: {
lineStyle: {
width: 6,
color: [
[0.25, "#7CFFB2"],
[0.5, "#58D9F9"],
[0.75, "#FDDD60"],
[1, "#FF6E76"],
],
},
},
pointer: {
icon: "arrow",
offsetCenter: [0, "-30%"],
itemStyle: {
color: "auto",
},
},
axisTick: {
length: 12,
lineStyle: {
color: "auto",
width: 1,
},
},
splitLine: {
length: 20,
lineStyle: {
color: "auto",
width: 5,
},
},
title: {
fontSize: 30,
},
data: [
{
value: this.chartValue,
name: this.chartName,
},
],
},
],
},
};
}
};
</script>
You should use the prop in following manner:
<GaugeChart chart-name="Sleep" chart-value="2" />
Documentation
HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.

react-native-charts-wrapper yOffset in yAxis not working

I'm trying to use this option, but it has no effect, and when I take a look at react-native-charts-wrapper code, I think maybe it is not correct.
In file ChartBaseManager.java, the setCommonAxisConfig function is only called for xAxis, but never called for yAxis. I'm a newbie at react native and java, so I don't understand all the code.
Maybe is this the reason for not working yOffset in y axis or I'm doing something wrong?
I'm using Line chart and my configuration is:
this.state = {
data: {
dataSets: [
{
values: [getDefaultPoint()],
label: "Teste",
config: {
drawCircleHole: false,
drawCircles: false,
drawValues: false,
lineWidth: 2,
barSpace: 0.2,
shadowWidth: 0.5,
shadowColor: processColor("white"),
shadowColorSameAsCandle: true,
neutralColor: processColor("white"),
decreasingColor: processColor("red"),
decreasingPaintStyle: "fill",
increasingColor: processColor("green"),
increasingPaintStyle: "fill",
color: processColor("#50E3C2"),
drawFilled: true,
fillGradient: {
colors: [processColor("#3F4969"), processColor("#313347")],
positions: [0, 0.5],
angle: 90,
orientation: "LEFT_RIGHT"
},
fillAlpha: 200
}
}
]
},
legend: { enabled: false },
marker: {
digits: this.props.markerDigits,
enabled: true,
backgroundTint: processColor("blue"),
markerColor: processColor("#F0C0FF8C"),
textColor: processColor("white"),
textSize: Math.round(14 * EStyleSheet.value("$scale"))
},
xAxis: {
drawGridLines: false,
drawAxisLine: true,
drawLabels: true,
position: "BOTTOM",
textColor: processColor("white"),
valueFormatter: "date",
valueFormatterPattern: "HH:mm",
avoidFirstLastClipping: true,
textSize: 12 * EStyleSheet.value("$scale"),
axisLineColor: processColor("#50E3C2"),
gridColor: processColor(EStyleSheet.value("$chartGridLineColor")),
granularity: 1,
granularityEnabled: true,
yOffset: 5
},
yAxis: {
right: {
enabled: false
},
left: {
enabled: true,
valueFormatter: this.props.yValueFormatterPattern,
textColor: processColor("white"),
drawGridLines: true,
gridLineWidth: 1,
drawAxisLine: false,
drawLabels: true,
labelCount: 4,
labelCountForce: true,
yOffset: -5,
position: "INSIDE_CHART",
textSize: 10
}
},
chart: {
drawGridBackground: false,
autoScaleMinMaxEnabled: true,
touchEnabled: this.props.touchEnabled,
dragEnabled: true,
scaleEnabled: true,
scaleXEnabled: true,
scaleYEnabled: true,
pinchZoom: true,
doubleTapToZoomEnabled: true,
dragDecelerationEnabled: true,
dragDecelerationFrictionCoef: 0.99,
keepPositionOnRotation: false,
viewPortOffsets: {
left: this.props.viewPortLeftOffset,
top: this.props.viewPortTopOffset,
right: this.props.viewPortRightOffset,
bottom: this.props.viewPortBottomOffset
}
}
};
...
<LineChart
style={styles.chart}
data={this.state.data}
chartDescription={{ text: "" }}
legend={this.state.legend}
marker={this.state.marker}
xAxis={this.state.xAxis}
yAxis={this.state.yAxis}
{...this.state.chart}
/>
But if I place "yOffset: -5" in xAxis configuration, the offset is applied to labels.
Anyone has the same problem using this option in yAxis?
I tried moving configs out of state but get the same result, so I created a new app and used the code of LineChartGradientScreen.js of react-native-charts-wrapper examples and configured yAxis with options below.
No matter what value I put in yOffset, the labels always stay in same place
I want to put the labels above grid lines.
My example app code:
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
processColor,
} from 'react-native';
import {LineChart} from 'react-native-charts-wrapper';
const greenBlue = 'rgb(26, 182, 151)';
const petrel = 'rgb(59, 145, 153)';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={styles.body}>
<LineChart
style={styles.chart}
data={{
dataSets: [
{
values: [
{
y: 65,
x: 0,
marker: '65 kg',
},
{
y: 77,
x: 1,
marker: '77 kg',
},
{
y: 76,
x: 2,
marker: '76 kg',
},
{
y: 74,
x: 3,
marker: '74 kg',
},
{
y: 76,
x: 4,
marker: '76 kg',
},
{
y: 65,
x: 5,
marker: 'Today: 65 kg',
},
],
label: '',
config: {
mode: 'CUBIC_BEZIER',
drawValues: false,
lineWidth: 2,
drawCircles: true,
circleColor: processColor(petrel),
drawCircleHole: false,
circleRadius: 5,
highlightColor: processColor('transparent'),
color: processColor(petrel),
drawFilled: true,
fillGradient: {
colors: [processColor(petrel), processColor(greenBlue)],
positions: [0, 0.5],
angle: 90,
orientation: 'TOP_BOTTOM',
},
fillAlpha: 1000,
valueTextSize: 15,
},
},
{
values: [
{
y: 35,
x: 0,
marker: '35 kg',
},
{
y: 47,
x: 1,
marker: '47 kg',
},
{
y: 46,
x: 2,
marker: '46 kg',
},
{
y: 44,
x: 3,
marker: '44 kg',
},
{
y: 46,
x: 4,
marker: '46 kg',
},
{
y: 35,
x: 5,
marker: 'Today: 35 kg',
},
],
label: '',
config: {
mode: 'CUBIC_BEZIER',
drawValues: false,
lineWidth: 2,
drawCircles: true,
circleColor: processColor(petrel),
drawCircleHole: false,
circleRadius: 5,
highlightColor: processColor('transparent'),
color: processColor(petrel),
drawFilled: true,
fillGradient: {
colors: [processColor('red'), processColor('yellow')],
positions: [0, 0.5],
angle: 90,
orientation: 'TOP_BOTTOM',
},
fillAlpha: 1000,
valueTextSize: 15,
},
},
],
}}
chartDescription={{text: ''}}
legend={{
enabled: false,
}}
marker={{
enabled: true,
markerColor: processColor('white'),
textColor: processColor('black'),
}}
xAxis={{
enabled: true,
granularity: 1,
drawLabels: true,
position: 'BOTTOM',
drawAxisLine: true,
drawGridLines: false,
fontFamily: 'HelveticaNeue-Medium',
fontWeight: 'bold',
textSize: 12,
textColor: processColor('gray'),
valueFormatter: ['M', 'T', 'W', 'T', 'F', 'S'],
}}
yAxis={{
left: {
enabled: true,
textColor: processColor('white'),
drawGridLines: true,
gridLineWidth: 1,
drawAxisLine: false,
drawLabels: true,
yOffset: -5,
position: 'INSIDE_CHART',
textSize: 10,
gridColor: processColor('white'),
},
right: {
enabled: false,
},
}}
autoScaleMinMaxEnabled={true}
animation={{
durationX: 0,
durationY: 1500,
easingY: 'EaseInOutQuart',
}}
drawGridBackground={false}
drawBorders={false}
touchEnabled={true}
dragEnabled={false}
scaleEnabled={false}
scaleXEnabled={false}
scaleYEnabled={false}
pinchZoom={false}
doubleTapToZoomEnabled={false}
dragDecelerationEnabled={true}
dragDecelerationFrictionCoef={0.99}
keepPositionOnRotation={false}
/>
</View>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: 'black',
},
body: {
backgroundColor: 'black',
},
chart: {
height: 250,
},
});
export default App;

Increase width of Xaxis title in bar chart in highcharts

I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].
Firstly, I am using the below highcharts code in react native to develop iOS app.
I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.
Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.
To increase the width of the labels, set the right style:
xAxis: {
categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 25,
y: -22,
align: 'left',
style: {
width: '300px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/went9xmf/
API: https://api.highcharts.com/highcharts/xAxis.labels.style