i do have a chart in my application with many x-values. The labeling doesnt seem to work fine because there is e.g. no space between the labels like this:
I know i could make the labels vertical, though is there an other option to scale/place the labels mor intelligent? Or is doing it vertically the way to go?
I guess my first thought is are your labels the same length every time?
Vertical labeling is often preferred because in many of the examples given we are using variable lengths for things like names.
Does your chart scroll off the screen because of all the columns? just curious.
Now you could try creating the grid with a set width to the columns, something like this and see how it does.
series: [{
....
renderer: function(sprite, storeItem, barAttr, i, store) {
// set a width that gives you enough space
barAttr.width = 60;
return barAttr;
},
....
now looking over my code I often use the Ext.String.ellipsis function to set the length of my labels under my columns. so something like this below where I trim at 8 characters:
axes: [{
type: 'Category',
position: 'bottom',
fields: ['name'],
label: {
renderer: function(v) {
return Ext.String.ellipsis(v, 8);
},
}
....
It work for me
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Time',
style: {
textAlign: 'center',
},
label: {
rotate: {
degrees: 270
}
}
}
enter image description here
Related
I am attempting to use the Multiple RadialBars chart to show 3 percentages, along with the "Total" average percentage in the middle. Documentation for this chart can be found here: https://apexcharts.com/vue-chart-demos/radialbar-charts/multiple-radialbars/
My issue is with how the chart displays the "Total" value. I would like this value to go out two decimal places, but instead, it keeps the full floating point value. I've attached an image to elaborate.
RadialBar Long Percentage
I know this problem can be fixed by using a formatter for the total, and simply using the .toFixed(2) method. However, I can't seem to figure out the formatter for this chart. Without using a formatter, the default behavior finds the average of all three percentages (as seen above). The documentation unfortunately does not elaborate on how to customize the formatter function.
var efficiencyOptions = {
series: [],
chart: {
height: 350,
type: 'radialBar',
},
plotOptions: {
radialBar: {
dataLabels: {
name: {
show: true,
fontSize: '22px',
},
value: {
show: true,
fontSize: '16px',
},
total: {
show: true,
label: 'Total',
// formatter function goes here
formatter: function (w) {
// Need to find average of three percentages and fix to two decimal places
}
}
}
}
},
colors: ['#1ab7ea', '#0084ff', '#39539E'],
labels: ["Laser 1", "Laser 2", "Laser 3"],
};
If anyone could help me figure out this formatter function it would be very appreciated. Thank you very much in advance.
value: {
formatter: function(val) {
return parseInt(val);
},
color: '#111',
fontSize: '36px',
show: true
},
In Charts.js, i am trying to create a bar chart with a single data set and each column being differently coloured.
The desired result would look like this:
However, when i try to create something like this, at best, i get the following
The following code is the chart config object used to initialise the chart:
var config_canvas_alerts = {
type: 'bar',
data: {
datasets: [{
data: [
value0,value1,value2,value3,
],
backgroundColor: [
"#F7464A","#46BFBD","#FDB45C","#949FB1",
],
}],
labels: [
"Move - Match " + value0,
"Move - Unmatch " + value1,
"Permit - Match " + value2,
"Permit - UnMatch" + value3,
]
},
options: {
responsive: true,
legend: {
position: 'right',
onClick: function (e, p) {
alert(p.text);
},
},
title: {
display: true,
text: '#Model.mgt_dash_alert.graph_title',
position: 'top',
fontStyle: 'normal',
fontSize: 14,
padding: 10
}
}
};
I have tried to restructure the data so that each data value becomes its own dataset object with accompanying value, background colour and label but that didnt work out well either.
The only way i was able to achieve this (and hence how i generated the first screenshot) was by dynamically changing the graph from a pie chart to a bar chart after initialisation. The legend seemed to work well.
Changing dynamically from pie to bar chart is not ideal. Any suggestions here?
I'm trying to find a way of hiding the grid lines that extend beyond the max value of the axis (see image below for reference).
And the same for the X-Axis of course. I essentially just want the lines to stop at the max tick value. I've scoured the documentation but no avail so hoping the good people of SE will be able to suggest a solution.
What version are you using? My bar chart in v 2.5.0 doesn't extend above
It does have the optional 'padding' argument:
window.myBarChart = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
elements: {
rectangle: {
borderWidth: 2,
}
},
layout: {
padding: {
top: 12
}
},
responsive: true,
legend: {
position: 'right',
}
}
});
I have created a basic boxplot using highcharts and it shows me the values for maximum, max quartile, median, min quartile and minimum when I hover the mouse over the box plot. I want to somehow display these values in the plot itself beside each of the lines.
I checked out the api and found that "dataLabel" would help but this is not supported for the boxplot. Could someone enlighten me on how to achieve this?
Thanks.
Not possible out of the box, but as mentioned by Steve Gu achievable by scatter. You can even ignore the formatter and disable the marker alltogether:
{
series: [
{
type: 'scatter',
tooltip: {
enabled: false
},
dataLabels: {
format: '{key}',
enabled: true,
y: 0,
},
data: [{ x: 0, y: 975, name: '975'}],
marker: {
enabled: false,
}
}
]
}
just disable marker and set format to key.
Add another data series, which is a type of "Scatter" and apply the data labels to this series using Marker. The trick is to use the same fill color as your background color and 0 line width so the marker will not be visible and only the label will be shown.
{
name: 'Outlier',
color: 'white',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
{
name: 'This is my label for the box',
x:0, //box index. first one is 0.
y:975 //it will be bigger than the maximum value of of the box
}
],
dataLabels : {
align: 'left',
enabled : true,
formatter : function() {
return this.point.name;
},
y: 10,
},
marker: {
fillColor: 'white',
lineWidth: 0,
lineColor: 'white'
}
}
Unfortunately this option is not supported, only what you can do is use renderer to add custom text inside chart, but I'm aware that it can be not comfortable solution. http://api.highcharts.com/highcharts#Renderer.text()
Obviosuly you can reqest your suggestion in our user voice system http://highcharts.uservoice.com/
I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?
Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)
From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});
Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.
Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.