Highcharts axis labels cluttered but after a refresh, it'll be OK - javascript

I'm using Highcharts to create a negative-stack according to its document. My language is Persian (Farsi) so I'm using RTL direction overall the project. My problem doesn't limit to negative-stack type, but all charts with xAxis & yAxis.When I open the index.html file at first I'll face with axis labels overlap the chart as you see in the attached image-1, but after a refresh, it will be aligned properly according to the attached image-2.
Attachments:
image-1
image-2
👉 Sample CodeSandBox Link 👈

Looks like it's caused by the fontFamily.
After changing that property, everything works as expected.
chart: {
style: {
fontFamily: "iranyekan"
}
},
Live demo: https://codesandbox.io/s/upbeat-sun-me5m8

Related

Highcharts: Add ONE custom label to yAxis

I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/

How can I apply hover properties only to the current point not the entire dataset

Chart.js 2.0 line chart
I need to only show the hover state on the current point, not on the entire data set.
Chart.js documentation has this example,
This is what my chart looks like when I hover on a single point.
Thank you.
Found the answer. When creating the chart you can specify it in the options.
options: {
hover: {
mode: 'single'
}
}

How to show BAr graph rather than line graph in High Stoch Chart

I am trying to use High Stock Chart but rather than showing a line graph in it I want to show bar graph is there a possibility to do same
JS Fiddle
My end requirement is to make a graph like this
Will it involve some additional CSS
I need to show time slider at bottom as mentioned in screenshot
On Change of time interval on slider my graph will change
Please suggest on same.
After playing around with the chart I found the following solution which can be seen in the demo below:
$('#container').highcharts('StockChart', {
chart: {
type: 'column'
},
rangeSelector: {
allButtonsEnabled: true,
selected: 2
},
JSFIDDLE DEMO
The formatting is not the same as your end result but you should be able to play with the styling and ranges to make it work.

Is there any way to show tooltip by default (without hover pie chart) on chartjs

I have implemented the chartjs. And used piechart. Currently tooltip shows on hover. Is there any way to show the tooltip by default?
As I can understand, you want to always show a tooltip for a given data segment
You can use following code snippet:
var pieChart = $("#chartContainer").dxPieChart({
dataSource: data,
series: {}
}).dxPieChart("instance");
pieChart.getSeries().getPointByArg("Second").showTooltip();
See working sample here
And demo here

how to add annotation text to a Highcharts chart?

We'd like to add some textual annotation to the charts we create using Highcharts.js.
Ideally we would like to show the annotation in a pop-up window when you mouse over the chart title or a question-mark next to the chart title.
For example:
<b>Chart Title</b>
<sup>
?</sup>
However, when I pass the above html as the Highcharts chart title text attribute, Highcharts does not display it properly, it in fact displays the html text.
Is it possible to make this work using Highcharts interface? If so, how?
Any other suggestions would be appreciated.
Thanks.
The following works:
title: {
useHTML: true,
text: 'This is <b>bold</b>'
}
The useHtml property doesn't seem to be in the documentation that I can see but it seems to work for me and it also works on labels

Categories

Resources