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
Related
Hi Stack Overflow Community,
I am creating a react native mobile application using expo. I would like to display the line chart of user-entered data using the library "react-native-chart-kit". I need to display the line chart with the minimum & maximum values or from "Zero" in the Y-axis. My questions/blockers are,
Is there any possible way to have minimum and maximum values of the Y-axis to display the line chart? I have tried the implementation in "https://stackoverflow.com/questions/65961180/react-native-chart-kit-min-and-max-value". It did not help me.
I need to display the line chart from 0 (Y-axis). But if I use the prop "fromZero" of react-native-chart-kit, the data points and the line are displaying separately in Android. Below is the code snippet,
<LineChart
data={{
labels: date,
datasets: [
{
data: systole,
strokeWidth: 2, // optional
},
{
data: diastole,
strokeWidth: 2, // optional
},
],
}}
withShadow={false}
width={Dimensions.get("window").width} // from react-native
height={205}
//yAxisLabel={"$"}
chartConfig={{
//backgroundColor: '#e26a00',
backgroundGradientFrom: "white",
backgroundGradientTo: "white",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 0) => `rgba(2, 34, 82, ${opacity})`,
style: {
borderRadius: 16,
},
useShadowColorFromDataSet: false,
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726",
},
}}
withInnerLines={false}
legend={["blut"]}
bezier
fromZero
style={{
marginVertical: 5,
borderRadius: 16,
}}
/>
Line Chart- Data points and line displaying seperately
Any helps will be appreciated :)
I'm using the vue-stripe-elements-plus NPM module and I can't see how to add a custom font?
This plugin uses the options you pass in to the first element you create for creating the VUE elements.
It passes the style object to the style option when Stripe creates elements.
It passes the elements property to Stripe's elements function.
In here you can add a CustomFontSource object.
Please note, as in this example, if you want to use a Google font, you have to go to the URL provided and grab the URL within the #fontface descriptors. You would probably be better of hosting the font yourself as I fear these URLs may change over time.
stripeOptions: {
elements: {
fonts: [{
family: 'Lexend Deca',
src: 'url(https://fonts.gstatic.com/s/lexenddeca/v1/K2F1fZFYk-dHSE0UPPuwQ5qnJy_YZ2ON.woff2)',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
style: 'normal',
weight: '400',
display: 'swap',
}],
},
style: {
base: {
color: 'red',
fontFamily: '"Lexend Deca", sans-serif',
fontSize: '18px',
fontWeight: '400',
fontSmoothing: 'antialiased',
},
},
},
Stripe components:
<card-number
:stripe="stripeId"
:options="stripeOptions"
/>
<card-expiry
:stripe="stripeId"
:options="stripeOptions"
/>
<card-cvc
:stripe="stripeId"
:options="stripeOptions"
/>
I'm trying to set an array of components styles directly from the store, so that when the store changes, the design of each component changes too.
I store a set of links in my Vuex store like this:
links: [
{id: 1, text: 'Banana is a test', design: {color: 'red', 'background-color': 'blue', padding: '51px', margin: '5px', 'border-width' : '10px', 'border-color': 'blue', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'This is a test', design: {color: 'red', 'background-color': 'blue', padding: '20px', margin: '10px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Monkey is a test', design: {color: 'red', 'background-color': 'blue', padding: '5px', margin: '5px', 'border-width' : '10px', 'border-color': 'green', 'font-weight' : 600, font: 'Arial'}},
]
and this is how I try to render them
<a v-for="link in links" :key=link.id :href="link.destination" :id=link.id :style="link.design">
{{link.text}}
</a>
the trouble is, when the design objects changes in the Vuex store, the links styles are not subsequently updated as I would expect.
In my Vue component I've tried getting the links in different ways, assuming this would change the reactivity. Currently I get them using a computed method like so:
computed: {
getLinks: function() {
return this.$store.state.links
}
},
but whenever I change the value of a background-color, say from 'blue' to 'red', I have to reload the page to see the change. Do I need to force a rerender of the page everytime I call my mutation?
This is my mutation for reference:
setSelectedItemDesign (state, payload ) {
state.selectedItem.design[Object.keys(payload)[0]] = Object.values(payload)[0]
}
and I'd call it from my component like this:
this.$store.commit('setSelectedItemDesign', {'background-color' : this.rgbaValue})
Thats because you read value from store directly here return this.$store.state.links. This way it is not reactive and also anitpattern, because you should not access store like that.
You should create getter to get value and then it should be ok.
The problem was that I was not updating the array in my store in a way that Vue observes to trigger a view update, as nada correctly pointed out.
You can see here for more details: vuejs.org/v2/guide/list.html#Array-Change-Detection
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>