Develop Reference

ApexCharts.js RTL Support

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'
},
......

Use series data but display custom text on top of columns Highchart

I'm trying to use highchart, working with colums.
My series data are some hours.
For example, if my data is 23.75, it means 23:45 hours.
I would like to use my 23.75 data so that my colums are in the right place, but the little text on top of my column displays "23:45".
Is it possible ? I can't find the right option to do this.
Thanks in advance !

you can format data label values by formatter
dataLabels: {
enabled: true,
formatter: function () {
return this.y; // you can update datalabel values here
}
}

Found it !
stackLabels: {
enabled: true,
formatter: function() {
return this.total // custom text label here
}
}

Formatting dataLabels in Highcharts

I am trying to use html tags like <table> and <tr> for the dataLabels, but it seems I'm not able to use these tags and only the basic tags (<b>, <strong>, <i>, <em>, <br/>, <span>). I was able to format the tooltip data with other html tags by setting the 'useHTML' tag to true. Is there a way to do the same for the dataLabels? This is what the two look like, the tooltip is on bottom.

You can format dataLabels with useHTML also. I don't know how readable your chart will be with all that extra data showing at all times, but you can put a table in the dataLabels.
http://jsfiddle.net/crLcxvLr/1
plotOptions: {
series: {
dataLabels: {
formatter: function() {
return "<table><tr><td>HEADER LEFT</td><td class='right'>Header Right</td></tr><tr><td>" + this.x + "</td><td class='right'>" + this.y + "</td></tr>";
},
enabled: true,
useHTML: true,
}
}
},

Highcharts: Format all numbers with comma?

I'm using Highcharts and I want to format all numbers showed anywhere in the chart (tooltips, axis labels...) with comma-separated thousands.
Otherwise, the default tooltips and labels are great, and i want to keep them exactly the same.
For example, in this chart, the number should be 2,581,326.31 but otherwise exactly the same.
How can I do this?
I tried adding:
tooltip: {
pointFormat: "{point.y:,.0f}"
}
But this got rid of the nice circle and series label in the tooltip - I'd like to keep that. And ideally I'd prefer to use a single option to set global number formatting, across the whole chart.

This can be set with the thousandSep (API) global option.
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
See this JSFiddle example.

This way worked with me.
I configured in yAxis option.
yAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2);
}
}
}

In case you want to show numbers without commas and spaces.
eg. by default 9800 shows as 9 800.
If you want 9800 to be shown as 9800
you can try this in tooltip:
tooltip: {
pointFormat: '<span>{point.y:.f}</span>'
}

This way work for me.
I use Angular 10 and I did this for Tooltip and yAxis.
for yAxis use numberFormat:
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[0]
},
formatter: function() {
return Highcharts.numberFormat(this.value, 3);
}
},
and for Tooltip :
{point.y:.f}

Add tip text dynamically to a slider

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