Related
I'm trying to make an area chart using apexcharts with nuxt (vue2), but the area is not getting filled, and the options i set in chartOptions for fill are getting used by the line itself instead of the area, as below:
this is my apexchart component:
<client-only>
<apexcharts
type="area"
width="70%"
ref="realtimeChart"
:options="chartOptions"
:series="series">
</apexcharts>
</client-only>
this is my chartOptions:
chartOptions: {
chart: {
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
},
},
id: "basic-bar",
colors: ["#FFA07A"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
forecastDataPoints: {
count: 28,
strokeWidth: 4,
dashArray: 5,
},
title: {
text: "doesnt matter",
align: "center",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "date",
tickAmount: 40,
},
yaxis: [
{
title: {
text: "Mt CO2eq/we",
},
forceNiceScale: true,
},
]
},
Can anyone help ?
I was declaring type: "line" in my series. thats all.
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
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" />
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})
}
}