I am use apexcharts vue bindings to plot a few bar charts.
As told by docs it should be possible to disable the toolbar by set show:false as seen there.
So i did it on my helper function:
// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
toolbar: { show:false },// docs says it should do the trick
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: { distributed: true, horizontal: true }
},
tooltip: {
theme: "dark"
},
xaxis: {
categories: labels,
color: "white",
labels: {
style: {
colors: ["white"]
}
}
},
yaxis: {
labels: {
style: {
color: "white"
}
}
}
});
and i pass it to my vue component this way:
<template>
<v-layout row justify-center wrap>
<v-flex xs12>
<apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
</v-flex>
</v-layout>
</template>
<script>
const doOptions = require("./do-chart-options");
const labels = [
"Javascript",
"Java",
"SQL",
"HTML",
"CSS",
"C",
"C++",
"PHP",
"Python",
"GO",
"Ruby"
];
module.exports = {
name: "chart-languages",
data: _ => ({
series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
chartOptions: doOptions(labels)
})
};
</script>
However the menu is still there:
Any guidance is welcome.
toolbar should be under chart key
{
chart: {
toolbar: {
show: false
}
},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
...
}
You can check my demo here
chart: {
toolbar: {
show: true,
tools:{
download:false // <== line to add
}
}
}
Can only disable download option , but toolbar exists
Use CSS to hide the option(s) from the download section.
/* hide the Download CSV */
<style lang="scss" scoped>
::v-deep .apexcharts-menu-item.exportCSV {
display: none;
}
</style>
edit this line may help you
{chart: {toolbar: {show: false
}},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
}
Related
I am using an apexchart on my code to display a chart with some data, however my data is not shown when the page loads, it only shows if I zoom in/zoom out or resize the window which I find kinda weird.
I've found a similar issue on the apexcharts github but it has been open since 2019 and is not really active so I'm asking here maybe someone had the same issue and found some way to fix it.
Here's my apexchart:
<v-col cols="12">
<apexchart
type="line"
height="350"
:options="chartOptions"
:series="series"
></apexchart>
</v-col>
Here's my chartOptions:
chartOptions: {
chart: {
height: 350,
type: "line",
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
legend: {
labels: {
colors: "#FFFFFF",
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
xaxis: {
type: "datetime",
categories: [],
labels: {
datetimeUTC: false,
style: {
colors: "#FFFFFF",
},
},
},
yaxis: [
{
title: {
text: "Energie",
style: {
color: "#FFFFFF",
},
},
labels: {
style: {
colors: "#FFFFFF",
},
},
decimalsInFloat: 1,
},
{
opposite: true,
title: {
text: "Puissance",
style: {
color: "#FFFFFF",
},
},
labels: {
style: {
colors: "#FFFFFF",
},
},
decimalsInFloat: 1,
},
],
tooltip: {
enabled: false,
},
colors: ["#8AB4F7", "#8DCD7F"],
},
Set a ref to your chart <apexchart ref="chart_ref"/> and call following line:
this.$refs.chart_ref.refresh()
You can also wrap this line in nextTick or setTimeout (0) if still bugging.
I'm using apexcharts with vue (vue-apexcharts 1.6.1) and making horizontal barchart for UHD resolution. The apexcharts inner is overflowing the chart width which is 100%.
Here is the template code:
<template>
<div>
<apexchart height="820" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>
And here is the chart options:
options() {
return {
chart: {
type: 'bar',
width: "100%",
height: 820,
toolbar: {
show: false
}
},
legend: {
show: false
},
xaxis: {
categories: this.categoryData,
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
show: false
}
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
},
fill: {
colors: ["#0E5CAD", "#EA5455", "#0396FF", "#7367F0", "#D939CD"],
type: "gradient",
gradient: {
shade: "light",
gradientToColors: [
"#79f1a4",
"#feb692",
"#abdcff",
"#ce9ffc",
"#f6ceec"
],
shadeIntensity: 1,
type: "diagonal1",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: true,
borderRadius: 10,
barHeight: "70%",
colors: {
ranges: [
{
from: 0,
to: 0,
color: "pink"
}
],
backgroundBarColors: "#272A52",
backgroundBarRadius: 10
}
}
},
dataLabels: {
enabled: false
},
tooltip: {
enabled: false
},
responsive: [
{
breakpoint: 3199,
options: {
chart: {
height: 300
},
yaxis: {
opposite: true,
labels: {
style: {
colors: ["#BEBFCB"],
fontsize: "14px"
}
}
},
plotOptions: {
bar: {
borderRadius: 4,
colors: {
backgroundBarRadius: 4
}
}
}
}
}
]
};
}
Here's the output of above code:
Output of above code
Output of above code with dev tools
Expected behavior:
Expected behavior design
How can I adjust the chart so that my site matches the design? Right now the font-size of label is 40px in UHD resolution.
Thanks
P.S. I'm not using flex in any ancestor elements.
I solved this issue by giving maxWidth to y-axis label and by manipulating my x-axis categories to be in multiline.
After fix image
yaxis: {
opposite: true,
labels: {
maxWidth: "auto",
style: {
colors: ["#BEBFCB"],
fontSize: "40px"
}
}
}
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';
}
I am using highcharts to display data from MySQL database using PHP.
here is my code
CustomGauge.vue
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: "CustomGuage",
components: {
highcharts: Chart
},
props: [
"data",
"title",
"name",
"min",
"max",
"format",
"text",
"x",
"y",
"target",
"targetFormat"
],
data() {
return {
chartOptions: {
chart: {
type: "solidgauge",
style: {
fontFamily: "Segoe UI Light",
fontSize: "22px"
},
marginBottom: 190
},
title: {
text: this.title,
align: "left"
},
pane: {
center: ["50%", "85%"],
startAngle: -90,
endAngle: 90,
size: 200,
background: {
innerRadius: "60%",
outerRadius: "100%",
shape: "arc",
backgroundColor: "#f2f2f2"
}
},
// the value axis
yAxis: {
min: 0,
max: this.max,
stops: [
[0.1, "#c00000"], // green
[0.5, "#ffc000"], // yellow
[0.9, "#4f6228"] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPositions: [0, this.max],
title: {
y: -70
},
labels: {
y: 16
}
},
credits: {
enabled: false
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -1,
borderWidth: 0,
useHTML: true
}
}
},
series: [
{
name: this.name,
data: this.data,
dataLabels: {
format: this.format
}
},
{
data: this.target,
dataLabels: {
enabled: true,
format: this.targetFormat,
verticalAlign: "top",
borderWidth: 0
},
tooltip: {
enabled: false
},
type: "gauge",
dial: {
baseLength: "100%",
radius: "110%",
rearLength: "-45%"
}
}
]
}
};
},
};
I call it in my page like this
<CustomGuage
class="guage"
:title="guageTitle1"
:data="gaugeData1"
:format="gaugeFormat2"
:target="gaugeTarget1"
:max="SGMax1"
:targetFormat="targetFormat2"
/>
In the methods, i get the data from MySQL like this
axios
.get("http://localhost/intranet-php/SG1-max.php" + "?action=fetch-all")
.then(response => {
console.log(response.data);
//var x = JSON.parse(response.data)
var x = response.data;
console.log( x);
this.SGMax1.push(x);
console.log(SGMax1);
})
.catch(function(error) {
console.log(error);
});
I have even initialized it in data() like this -
SGMax1: [],
I get the error,
ReferenceError: SGMax1 is not defined at eval (dashboard.v1.vue?88bf:1134)
I used the exact methods to get other data and it works fine. The php file also works fine as i can see the correct output in the console. Its only for this particular one i get the error. Am i defining it wrong in the chart component? Thanks for the help in advance
I am using echart( https://v-charts.js.org/#/en/ring ) in my vue js application. and i am trying to customize tooltip in ring chart. but i am not able to get. i want to display my own json data in tooltip when mouse over in the particular color.
Html code:
<ve-ring :data="OptionRingChart" :settings="chartSettings"></ve-ring>
Javascript code:
chartSettings: {
itemStyle: {
normal: {
color: function (params) {
var colorList = [
'red', 'lightgreen'
];
return colorList[params.dataIndex]
}
}
},
label: {
normal: {
show: false
}
},
tooltip: {
show: true,
trigger: 'item',
position: ['35%', '32%'],
backgroundColor: 'implements',
textStyle: {
color: '#000000',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'sans-serif',
fontSize: 55,
},
},
},
OptionRingChart: {
color: ['green', 'red'],
columns: ['name', 'test'],
rows: [
{ 'name': 'D', 'test': 1 },
{ 'name': 'C', 'test': 2 }
],
},
You will want to utilize the tooltip.formatter
var option = {
tooltip: {
show: true,
trigger: 'item',
formatter: function (a) {
my_json_data = get_and_format_my_data()
return `${my_json_data}`
}
}
}