I'm importing Apexcharts' simple donut chart to my Vue.js project, however, even after following the documentation provided on their site, the legend titles stay as 'series-1, series-2, ...'.
Here's a picture of what's rendered: Donut Chart
As you can see I'm following the documentation, adding series and labels to both the data object and the div element, but for some reason still can't render the proper labels.
How would I go about resolving this issue?
Side note: switching legend.show from false to true does nothing.
<div id="donut-chart">
<v-container>
<div id="chart">
<apexchart
type=donut
width=380
:options="chartOptions"
:labels="labels"
:series="series" />
</div>
</v-container>
</div>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'donut-chart',
data: () => ({
series: [23, 11, 54, 72, 12],
labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
chartOptions: {
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230
}
}
}),
components: {
apexchart: VueApexCharts,
}
}
labels property should be a nested property of chartOptions, not to be passed as a separate prop.
chartOptions: {
labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230
}
}
<apexchart
type=donut
width=380
:options="chartOptions"
:series="series" />
Related
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
I'm sorry for my poor English.
I'm trying to display a horizontal line in a graph using vue-chartjs and chartjs-plugin-annotation.
The graph appears and the options are applied, but the horizontal line does not appear because the settings in the annotation are not working.
If anyone knows how to fix this, please let me know.
The version and code is as follows
Chart.js v2.9.4
chartjs-plugin-annotation v0.5.7
Chart.js
import { Bar } from 'vue-chartjs'
import chartjsPluginAnnotation from 'chartjs-plugin-annotation'
export default {
extends: Bar,
props: ["chartData", "options"],
mounted() {
this.addPlugin(chartjsPluginAnnotation),
this.renderChart(this.chartData, this.options)
}
}
**Vue**
<template>
<Chart :chartData="chartItems" :options="chartOptions"/>
</template>
<script>
import Chart from './Chart.js'
export default {
components: {
Chart
},
data() {
return {
chartItems: {
labels: ["12月", "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"],
datasets: [{
label: "月ごとの数",
data: [9500, 12000, 19000, 15000, 9500, 5000, 10000, 14000, 9500, 8000, 4500, 7000],
backgroundColor: 'lightblue'
}]
},
chartOptions: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
gridLines: {
display:false
}
}],
yAxes: [{
display: true,
id: 'y-axis-0',
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
userCallback: (label, index, labels) => label.toLocaleString()
},
}]
},
annotation: {
annotations: [{
type: 'line',
id: 'hLine',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 9000,
borderWidth: 2,
borderColor: 'black'
}]
},
tooltips: {
enabled: false
},
animation: {
duration: 0
}
}
}
}
}
</script>
It seems like there might be problems with the annotations library in chartjs 2.9.4, try downgrading to 2.9.3
Git issue: https://github.com/chartjs/chartjs-plugin-annotation/issues/276
in my page i need to show many charts, so i would like to create an Highcharts component and use it inside my .vue file within a v-for cicle.
how could i achieve this? here is what i did:
in my .vue page I have:
<v-flex ma-3 v-for="(el,index) in Items">
<my-chart-component
:series="el.series"
:xlabels="el.Labels"
:height="'300px'"
width="100%"
></my-chart-component>
</v-flex>
inside my component i have:
<template>
<chart
:series="mySeries"
:xlabels="myXlabels"
:options="myChartOptions"
:height="height"
width="100%"
></chart>
</template>
<script>
import VWidget from '#/components/VWidget';
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts/highcharts';
import loadExporting from 'highcharts/modules/exporting';
import brokenAxis from 'highcharts/modules/broken-axis';
export default {
name: 'my-chart-component',
components: {
VWidget,
Chart,
Highcharts,
loadExporting,
brokenAxis,
},
props: {
mySeries:Array,
myXlabels:Array,
height:String
},
data() {
return {
myChartOptions: {
chart: {
type: 'column'
},
legend: {
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 100,
y: 30,
floating: true
},
navigation: {
buttonOptions: {
enabled: true
}
},
credits: {
enabled: false
},
xAxis: {
xAxis: {
categories: props.myXlabels
},
},
yAxis: [{
title: {
text: '%',
align: 'middle',
rotation: 0,
},
type: 'linear',
}],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
},
series: {
pointWidth: 15,
borderWidth: 0,
dataLabels: {
enabled: false,
format: '{point.y:.0f}%'
},
cursor: 'pointer',
point: {
events: {
click: ''
}
}
}
},
exporting: {
sourceWidth: 1000,
sourceHeight: 600,
},
tooltip: {
shared: true,
valueSuffix: ' %',
followPointer: false,
},
title: {
text: '',
align: 'left',
margin: 30
},
colors: [
'#00c104',
'#d45087',
],
series: props.mySeries
},
};
},
created(){
loadExporting(Highcharts);
},
methods: {
}
};
</script>
now, i have many errors in the console, i have this error:
Error in data(): "ReferenceError: props is not defined"
in
at src/components/MyChartComponent.vue
and then [Vue warn]: Property or method "myChartOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
it seems i can't pass the chartOptions by props, how can i workaround this?
thank you
The props that you are passing to your child component should be named as props in the child component.
If props are called mySeries, myXlabels and height, than you should pass it like :my-series, :my-xlabels and :height.
<v-flex ma-3 v-for="(el,index) in Items">
<my-chart-component
:my-series="el.series"
:my-xlabels="el.Labels"
:height="'300px'"
width="100%"
></my-chart-component>
</v-flex>
need to define
<script>
export default {
props: {
Items: Array,
},
}
</script>
then need to pass your variable from parent vue page into this page or component:
<MegaMenu :categories="categories"/>
I want to replicate the same chart several times, using different data just like here https://jsfiddle.net/BlackLabel/qndeho5u/.
The concept works quite well but when transporting it to Vue there's something going wrong as the parameters aren't copied. For example polar isn't taken by the chart.
To avoid writing the chart options all the time I save it as a variable. On the jsfiddle it works but on my Vue code it doesn't.
What am I missing here?
<template>
<v-container fluid text-xs-center style="height: 90vh; max-height: 100%;">
<v-layout row wrap>
<v-flex xs6>
<v-card flat>
<Chart :options="chart1"/>
</v-card>
</v-flex>
<v-flex xs6>
<v-card flat>
<Chart :options="chart2"/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import Chart from '../components/Chart.vue'
import Highcharts from 'highcharts'
var testdata2 = {name:'a', value: [
// each slice of the pie gets its own color
{ y: 10, color: '#1DACE8', name: 'a' },
{ y: 30, color: '#1C366B', name: 'b' },
{ y: 45, color: '#F24D29', name: 'c' },
{ y: 93, color: '#E5C4A1', name: 'd' },
{ y: 15, color: '#C4CFD0', name: 'e' }
]}
var testdata3 = {name:'b', value:[
// each slice of the pie gets its own color
{ y: 30, color: '#1DACE8', name: '1a' },
{ y: 20, color: '#1C366B', name: '2b' },
{ y: 35, color: '#F24D29', name: '3c' },
{ y: 23, color: '#E5C4A1', name: '4d' },
{ y: 95, color: '#C4CFD0', name: '5e' }
]}
var options = {
chart: {
polar: true,
backgroundColor: '#F5F5F5'
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
theme: {
fill: "#F5F5F5"
}
}
}
},
title: {
text: 'City 1'
},
subtitle: {
text: 'Railacc stuff'
},
pane: {
startAngle: -22.5
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: false
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0,
colorByPoint: true
}
},
tooltip: {
formatter: function() {
return this.y, this.point.name;
}
}
}
export default {
name: 'chartapp2',
components: {
Chart,
},
data() {
return {
chart1:{
options,
legend: {
enabled: false
},
series: [{
type: 'column',
data: testdata2.value,
pointPlacement: 'between'
}]
},
chart2:{
options,
legend: {
enabled: false
},
series: [{
type: 'column',
data: testdata3.value,
pointPlacement: 'between'
}]
},
}
},
}
</script>
I have reproduced this chart for you in Vue framework. Take a look at it and let me know if something is not clear for you.
Demo:
https://codesandbox.io/s/vue-template-9xb0c?fontsize=14
I am new to vue.js and your help and advise would be much appreciated.
I am using Chartjs and i would like to rotate my pie chart so it looks like a gauge. I am unsure where i am going wrong with my javascript and i am getting no errors in the console - could one kindly advise me
i am unsure if i have not placed "options" in the right place
chartjs.html
<div class="wrapper">
<div class="chart_header">chartjs guage</div>
<vue-chartsguagejs></vue-chartsguagejs>
</div>
chartsjsgauge.js
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
mounted () {
this.renderChart({
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [{
label: 'GitHub Commits',
backgroundColor: ['rgb(255, 255, 255)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [50, 10, 10, 10, 10, 10],
}],
options: {
cutoutPercentage: 0,
rotation: -3.1415926535898,
circumference: 3.1415926535898,
}
}, {responsive: true, maintainAspectRatio: false})
}
}
this is currently my dougnut chart which i am trying to rotate as a gauage
i found that restructuring my code in this format made a huge difference:
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
data () {
return {
datacollection: {
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [10, 10, 10, 10, 10],
}
]
},
options: {
rotation: -1.0 * Math.PI,
circumference: Math.PI,
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
}
}