I have a basic chart with a custom label, eg:
labels: {
items: [{
html: 'Testing Label',
style: {
left: '50px',
top: '50px'
}
}]
}
This works, but I'd like to position the label from the right side, I tried doing:
style: {
right: '50px',
top: '50px'
}
but this doesn't work...
JsFiddle link:
http://jsfiddle.net/0ze2u47h/3/
It seems that right property is not supported in chart.labels. For more complex configuration you can render the label using SVGRenderer:
chart: {
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var label = this.renderer.label('Test label', null, 100).add();
label.attr({
x: chart.plotWidth + chart.plotLeft - label.width
});
}
}
}
Live demo: http://jsfiddle.net/kkulig/aob1e197/
The advantage of rendering labels via renderer (not via constructor options) is that you can access parameters of the already created chart and label (chart.plotWidth, chart.plotLeft, label.width in this case).
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
Related
I'm trying to add extra padding to my chart (extra space at the right of the "orange" column):
But using chart 3.7.0 doesn't seem to work, any idea of how I can achieve this??
chart.options.scales:
scales: {
x: {
afterFit(axis) {
axis.paddingLeft = 50; //doesn't work
axis.paddingRight = 50; //doesn't work
},
},
},
Full Runnable example.
Chart.js docs state following
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
layout: {
padding: {
right: 50
}
}
}
});
I have a line chart and I can export chart to pdf or image.
I wonder if I can put some additional text below the chart, only when I export it? Such as additional information about the chart data.
I'd like to export the chart that looks like this:enter image description here
I use Ionic v3.
If possible, I would like to see a sample code.
Thank you.
Refer to this live demo: http://jsfiddle.net/kkulig/fje0agem/
I created some space for the text area by manipulating chart.height and chart.marginBottom in exporting.chartOptions. I adjusted the position of some elements (credits, legend) by changing their y offset.
Text and lines can be rendered via SVGRenderer. load event is a proper place to put the code responsible for that.
chart: {
height: 300,
width: 600
},
exporting: {
chartOptions: {
chart: {
height: 600,
marginBottom: 300,
events: {
load: function() {
var renderer = this.renderer;
renderer.path(['M', 30, 385, 'L', 570, 385, 'Z']).attr({
stroke: 'black',
'stroke-width': 1
}).add();
renderer.text('Some text...', 30, 400).add();
}
}
},
legend: {
y: -220
},
credits: {
position: {
y: -220
}
}
}
}
API references:
https://api.highcharts.com/highcharts/exporting.chartOptions
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
With Highcharts 7.2.0 you can add a caption (API) besides the chart which is included in the export.
For example (JSFiddle demo):
Highcharts.chart('container', {
series: [{
data: [1, 4, 3, 5],
}],
caption: {
text: '<b>Example</b><br><em>Lorem ipsum dolor sit amet.</em>'
}
});
I have a Google Geochart with this bunch of options:
options = {
displayMode: 'markers',
sizeAxis: { minSize: 5, maxSize: 5, minValue: 5, maxValue: 5 },
colorAxis: { colors: ['#ac2925'] },
defaultColor: '#ac2925',
markerOpacity: 0.9,
width: '100%',
legend: false
};
I have an html table with some data inside, and I want to highlight a marker into the chart if I have a mousehover into the table and if the content of the cell is the same of the 'Value' field of the chart element.
How can I do that?
its too late, but the answer might useful for some one.
In your HTML, call the JS function
<tr onmouseover="selectMyOption(0)">
<td>My Label</td>
</tr>
In JS, get the position of the arrayToDataTable, make an object and pass to setSelection method.
function selectMyOption(x) {
var obj = [{row:x,column:null}]
geochart.setSelection(obj);
}
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.
Is there a way to create a Legend control for series that belong to Indicator Plot with Dojo Charting.
I've tried some standard well described ways from the documentation. But with no success! Legend are not appearing for Indicator Plot.
Maybe somebody know is it possible to draw legend for this case or not?
Thanks in advance!
EDIT(my code added):
1. id - id of chart dom element.
2. opts.chartOpts - chart options from outside js.
3. legname - id of legend dom element.
4. scale.avg - is just a double value.
this.chart = new Chart(id, this.opts.chartOpts);
this.chart.addPlot("default", {
animate: { duration: 1000, easing: easing.linear },
type: ColumnsPlot,
markers: true,
gap: 1
});
this.chart.addPlot("avgline", {
type: IndicatorPlot,
vertical: false,
lineStroke: { color: "#00ff00", style: "ShortDash" },
stroke: { width: '1.2px' },
fill: '#eeeeee',
font: 'normal normal normal 11px Arial',
labels: 'none',
offset: { x: 32, y: 4 },
values: [scale.avg],
precision: this.opts.precision
});
//Add axis code goes here... cutted for clearance
this.chart.addSeries('Power', chartOptions.data);
this.chart.addSeries('Average', [scale.avg], { plot: 'avgline' });
var tip = new Tooltip(this.chart, "default", { 'class' : 'kaboom' });
var mag = new Magnify(this.chart, "default");
var hightlight = new Highlight(this.chart, "default");
this.chart.render();
this.leg = new Legend({ chart: this.chart, horizontal: false }, this.legName);
And as result of this code I see legend for 'default' plot 'Power' series only. And nothing for 'Average' series.