I am using the apexcharts.js library and my app supports Arabic language, when the RTL mode is activated the tooltip appears as follow. Notice how the tooltip takes full width.
I know this is too late 😁. Please try to set a boolean variable that takes if isRTL or not, then set opposite attribute, in chartOptions>yaxix, to isRTL value and reverse series data like the code below.
let isRTL = true
let chartOptions: {
//... your options
yaxix:{
//... your yaxix options
opposite: this.isRTL
}
}
let series = [...]
if(this.isRTL){
series.map(s => s['data'].reverese())
}
I hope this solution will work for you.
Good luck 😁.
you can add style to it like this:
type: 'area',
height: 100,
style:{
direction: 'rtl'
},
......
Related
I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?
Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>
How can i make the label text in the fiddle to be displayed the same way when exporting to image or pdf?
fiddlehttp://jsfiddle.net/hy5gx3v9/2/
You need to set the exporting: allowHTML: true if you would like to use HTML elements during exporting the chart.
exporting: {
allowHTML: true
}
The set the xAxis.labels.style.textOverflow equal to none.
After setting mentioned things, additionally you can delete the style attribute within returned string of the xAxis.labels.formatter:
labels: {
align: 'right',
useHTML: true,
formatter: function() { //use formatter
return '<span class="qTitle">' + this.value + '</span>';
},
style: {
textOverflow: 'none',
}
},
Live example: http://jsfiddle.net/song62xr/
API Reference: https://api.highcharts.com/highcharts/exporting.allowHTML
Kind regards!
To the best of my knowledge, you can't, however, the best way to do it would be making images and a pdf yourself, and then making buttons for it.
By the way, when I removed all the gibberish, it exported just fine.
I am trying to use the google-chart polymer element (http://googlewebcomponents.github.io/google-chart/components/google-chart/) to draw a Ligth ON/OFF chart.
This is what I get using a "area" chart.
However I want a graph where I can read the "state" of the light, hence a better representation would be use a step chart. This is my code that uses the "stepped-area" chart.
this.$.chart.type = "stepped-area";
this.$.chart.cols = [{label:"Date", type:"date"}, {label:"On/Off", type:"number"}];
this.$.chart.rows = chartData;
this.$.chart.options = { strictFirstColumnType: "false", backgroundColor: "transparent" };
this.$.chart.drawChart();
However when I am trying to use a date type as my first column I get a "Stepped area series with value domain axis is not supported.".
Is there another way to do that?
Maybe setting some other option (strictFirstColumnType: "false" is not working)?
Eventually my workaround was using string dates.
Here it follows the code:
this.graphs[tuple.uuid].cols = [{label:"Date", type:"string"}, {label: tuple.behavior, type:"number"}];
this.graphs[tuple.uuid].rows = [];
this.graphs[tuple.uuid].options = {
backgroundColor: "transparent",
hAxis: {
slantedText: true
},
vAxis: {
minValue:0,
maxValue:1,
gridlines:{count:2},
ticks: [{v:1.00, f:'ON'}, {v:0.00, f:'OFF'}]
}
};
this.graphs[tuple.uuid].type = "stepped-area";
This is my final result:
The date label is still not easy to read but the final result is not bad at all.
You could also use a timeline-chart, like in this fiddle:
https://jsfiddle.net/dx0Lw52b/
I've been using the following code to set dataLabels for bar charts in Highcharts...
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y==null) {
return '<i>(Suppressed)</i>';
} else {
return '';
}
}
}
}
}
Basically, I want to be able to show the user when a value has been hidden for privacy reasons.
In previous versions of Highcharts, the label would show up for the null values as I desired. In version 3.0.8, I do not get any dataLabels for the null vales.
Is there a workaround or fix for this?
Possibly bug, reported here https://github.com/highslide-software/highcharts.com/issues/2899
Workaround: use renderer http://api.highcharts.com/highcharts#Renderer.text
As Sebastian points out, this is in fact a bug. However, there is an easy fix... In highcharts.src.js, simply change the call to the pick function for getting plotX and plotY in Series.prototype.alignDataLabel (lines 16132 and 16133) to:
plotX = pick(point.plotX, 0),
plotY = pick(point.plotY, 0),
rather than
plotX = pick(point.plotX, -999),
plotY = pick(point.plotY, -999),
Hope this ends up being helpful to somebody...
In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},
tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.
I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link