I want to add annotations to my column chart Google Chart, I use Vue Chartkick to display the chart. Is there any way for me to display Annotations from Vue Chartkick? Any help would be appreciated, thank you.
This is my chart:
<column-chart
:data="data"
legend="bottom"
adapter="google"
>
</column-chart>
And this is my data:
data: [
{
name: "Sales",
data: {
2021: 100,
2020: 80,
2019: 60,
2018: 50,
},
},
],
Related
Good evening. I am working on learning Vue.js and I want to make a basic charting website to practice and build skills. I am trying to customize my GChart.
Current chart: 1.
The first thing I am aiming to do is to customize the background color. The next thing I am looking to do is get rid of the label on the side, and lastly, although the chart says "you" above it that is not the chart's name. This is my code:
import { GChart } from "vue-google-charts";
export default {
name: 'HelloWorld',
components: {
GChart
},
computed: {
myStyles () {
return {
position: 'relative',
}
}
},
data () {
return {
chartData: [
['You', 'Percent'],
['Cute', 100],
],
chartOptions: {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
}
#chart{
padding:5px;
width:60%;
margin:auto;
background-color:rgb(241, 241, 129);
}
#actualChart{
margin:auto;
height:300px;
width:230px;
background-color:rgb(241, 241, 129);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="chart">
<h1>You</h1>
<div id="actualChart">
<GChart
type="PieChart"
:data="chartData"
:options="chartOptions"
:styles="myStyles"
/>
</div>
</div>
I have tried looking online and at the documentation but they either don't show it in Vue.js or they just show how to create a chart but not customize it. If there is a better way to chart in Vue, I am open to trying it. I eventually plan on allowing the user to submit data to create the chart and potentially pull data from an API. Thank you for taking the time to read this, and maybe answering it!
The possible options for a PieChart can be found here.
For your use case it would be:
{
"chartOptions": {
"title": "Your Title",
"backgroundColor": "#00cc00",
"legend": "none"
}
}
Also check the following resource, available in the README.md file of the npm package.
I've followed the quill playground guide but using vuejs and it doesn't work. There's no error on the browser but a weird arrow is showing.
Example: https://codepen.io/danny1014/pen/gOLZNZQ
var quill = new Quill("#quill-container", {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
["image", "code-block"]
]
},
scrollingContainer: "#scrolling-container",
placeholder: "Compose an epic...",
theme: "bubble"
});
Did you import css file of theme "bubble"?
Something like #import "~quill/dist/quill.snow.css";
Try using snow theme instead of bubble
I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.
I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.
Has anybody else ever run into this and found a solution?
I have been using this site as a resource for years and never asked a question. I can't figure this one out.
The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to be able to display the legend.
Code snippets and screenshot of graph below:
<template>
<div class="standard_div">
<!-- Begin chart component of graph -->
<v-chart v-if="showChart" :options="chartOptionsBar"/>
<!-- End chart component-->
</div>
</template>
<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>
chartOptionsBar = {
xAxis: {
// The data for the series
data: this.xAxisSeries,
// Parameters for the x axis
name: this.x_axis,
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 20, 20, 20],
fontWeight: 'bold',
}
},
yAxis: {
// Parameters for the x axis
name: this.y_axis,
nameLocation: 'middle',
nameTextStyle:{
padding: [25, 25, 25, 25],
fontWeight: 'bold',
}
},
series: [
{type: 'line', data: this.yAxisSeries},
],
legend:{
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
width: '50%',
orient: 'horizontal',
lineHeight: '56',
padding: 25,
type: 'plain',
zlevel: 20,
data: ["item0"]
},
title:{
show: true,
text: this.graphTitle,
x: 'center',
textStyle: {
fontSize: 20,
}
},
};
The link includes an image of the graph that was produced from the options bar above.
I had the same problem and importing the legend using
import 'echarts/lib/component/legend'
in my component worked for me!
Try to play with positioning props
I tried to use Chart.js in Vue through vue-chartjs. Also, I used [chartjs-plugin-datalabels][1]. Currently, I can toggle a chart by clicking the "Show a chart" button.
I could see values for each label in the chart. But, I couldn't customize the data labels.
[StackOverflow]
How to properly use the chartjs datalabels plugin
ChartJS: datalabels: show percentage value in Pie piece
Show values on top of bars in chart.js
[The plugin's Github Page]
https://github.com/chartjs/chartjs-plugin-datalabels/issues/10
https://github.com/apertureless/vue-chartjs/issues/410
[JS Fiddle]
https://jsfiddle.net/simonbrunel/mo5y35yg/
https://jsfiddle.net/simonbrunel/0jhffwfd/
Even after reading information above, I couldn't make mine work.
I would greatly appreciate any advice of solving this problem. Thanks! :)
Some of my code is the following:
<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";
export default {
name: "App",
components: {
PieChart
},
data() {
return {
isHidden: false,
chartData: {
labels: ["Green", "Red", "Blue"],
datasets: [
{
backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
data: [1, 10, 5]
}
]
},
options:{
plugins: {
datalabels: {
color: 'white',
textAlign: 'center',
font: {
weight: "bold",
size: 16
}
}
}
}
}
}
};
</script>
Please check out the entire code here :
https://codesandbox.io/embed/xy4x07q0o.
You need to bind options to pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>
Checkout demo here https://codesandbox.io/s/5kvll0xqyl
There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.
You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>