I am using the names property to label a scatter chart legend. I have not been able to find a way to only show the legend for only data14, data15, data16 and data17 and hide the legend elements for data1 through data13.
data1 through data13 will always be the same, data14 through data17 could expand or collapse in number and the label text will change.
names: {
data1: '2%',
data2: '5%',
data3: '10%',
data4: '15%',
data5: '20%',
data6: '25%',
data7: '30%',
data8: '35%',
data9: '40%',
data10: '45%',
data11: '50%',
data12: '55%',
data13: '60%',
data14: 'Oracle',
data15: 'HP',
data16: 'MS',
data17: 'Oracle'
},
Set your chart legend not visible:
legend: {
show: false
}
Then, make the legend visible only with elements you want:
chart.legend.show(['data14', 'data15', 'data16', 'data17'])
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 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 am using the upload image widget and I want to add a text overlay but don't know how, can someone answer me?
thumbnailTransformation: [{ width: 300, height: 300, crop: 'fill', border: "2px_solid_red" }],
You'll need to include an overlay key that's an object with overlay parameters, in this case, text specific.
For example -
thumbnailTransformation: [
{
width: 300,
height: 300,
crop: 'fill',
border: "2px_solid_red"
},
{
overlay: {
font_family: "Arial",
font_size: 20,
text: "Test"
},
gravity: "north_east"
}
]
Below is a JSFiddle you can try: https://jsfiddle.net/rhdvgy19/
All the other available text styling options can be found here -
https://cloudinary.com/documentation/image_transformations#styling_parameters
I'm building a link builder that lets people share multiple links from one link. At the moment I have several "cards" that users can put into their link template. For example, this allows them to have links to their music on Spotify (one card), or a link to their Youtube channel (another card).
I'm using VueDraggable to allow users to drag their cards into their template..
What I don't understand is, how should I store the cards components in the store so that they can be draggable? At the moment in my store I just have all of the cards as objects, as VueDraggable needs the data to be in 2 different lists..
export const state = () => ({
chosenCards: [
],
defaultCards: [
{id: 1, text: 'Twitter', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1DA1F2', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1DA1F2', 'font-weight' : 600, font: 'Arial'}},
{id: 2, text: 'Spotify', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#1db954', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#1db954', 'font-weight' : 600, font: 'Arial'}},
{id: 3, text: 'Youtube', font: 'Arial', destination: 'https://twitter.com/home', design: {color: '#c4302b', 'background-color': 'white', padding: '5px', margin: '5px', 'border-width' : '2px', 'border-color': '#c4302b', 'font-weight' : 600, font: 'Arial'}},
],
})
So I don't actually use any card components I've made. I want to be able to design the cards as components instead of just objects in my store, and still have them be draggable. How should I go about doing this?
I am using high charts, In that how to have legends vertically aligned legends with more columns(instead of having a navigation for legends), js
fiddle
https://jsfiddle.net/aarthi_101/ruw8t3p9/6/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
itemMarginBottom: 5
}
You can achieve that look of the legend with a help of a little trick. Change the type of the legend to floating and set spacingRight to create the space for the legend. Notice that it's done with the default horizontal layout. legend.width & legend.itemWidth allow you to make sure that 2 columns will be used (width / itemWidth has to be higher or equal to 2 and lower than 3). legend.x adjusts the position of the whole legend.
chart: {
marginRight: 200,
(...)
},
legend: {
floating: true,
align: 'right',
itemMarginBottom: 5,
width: 180,
x: 25,
itemWidth: 90
},
Live demo: https://jsfiddle.net/BlackLabel/avo0cgnt/
API reference: https://api.highcharts.com/highcharts/