We have been given a mock up:
Im looking around on highcharts but i dont see if i can do this. The thing im looking for specifically is a custom string/value above the x axis category.
As far as i can see the x axis category is just an array of strings, so i cant use html or anything even
From docs:
HTML in Highcharts
Texts and labels in Highcharts are given in HTML, but as the HTML is
parsed and rendered in SVG, only a subset is supported. The following
tags are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can
be styled with a style attribute, but only text-related CSS that is
shared with SVG is handled.
Most places where text is handled in Highcharts, it is also followed
by an option called useHTML. When this is true, the text is laid out
as HTML on top of the chart. This allows for full HTML support and can
be a good idea if you want to add images in your labels, tables in
your tooltip etc.
So, you can use HTML tags in categories array, for example:
xAxis: {
...,
categories: [
'<span style="font-size: 16px; color: red;">-22.5%</span><br>CLIENT<br>CALLS',
...
]
}
Live demo: http://jsfiddle.net/BlackLabel/kLu7rtea/
Docs: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
https://api.highcharts.com/highcharts/xAxis.labels.useHTML
Related
I am using the highchart library for displaying the charts.
It displays the chart as an SVG image. The legend part is also a part of the SVG.
In the screenshot, please check the <g class="highcharts-legend" element. It is a part of the SVG.
Is there any possibility that legends should not be a part of the SVG? It should be outside the SVG as an HTML list.
Maybe there is an option in the highchart configurations but I am missing it?
Update:
Using the useHtml option, the text of the legend is now outside the SVG, but the color dots are still inside the SVG.
There is useHTML option for legend, but it will place only text elements outside SVG.
legend: {
useHTML: true,
...
}
You need to create a custom legend if you want to move it fully outside of SVG.
Live demo: http://jsfiddle.net/BlackLabel/rox6dc7a/
API Reference: https://api.highcharts.com/highcharts/legend.useHTML
I work in angular project and use highchart.
The situation is:
At my chart, I have single series, type area.
I wanted the yAxis grid line to be displayed above my series, so I give it: gridZIndex: 10.
The problem is:
The yAxis is displayed also above the series markers, and I want it to appear only on the series area and line, not on markers.
Any solution?
Please the the demo that I draw:
There is no solution for this case using the regular API options because Z index in SVG is defined by the order the elements appear in the document. You can try to manipulate the DOM, however, this solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.
Demo: https://jsfiddle.net/BlackLabel/8p1smf05/
chart: {
polar: true,
type: 'line',
events: {
load() {
this.seriesGroup.element.insertBefore(
this.yAxis[0].gridGroup.element,
this.series[0].markerGroup.element
)
}
}
},
API to the load event: https://api.highcharts.com/highcharts/chart.events.load
Is there any way to update the color of a single point in a grouped data set? I can't seem to find a way to reliably set the colors.
A fiddle can be found here demonstrating the issue.
Points are grouped during the rendering process of the chart so they cannot be specifically targeted via constructor options (because we don't know which points will be generated by Highcharts algorithms).
What is more, Higcharts doesn't allow performing update function on the grouped point.
As a workaround your can change the CSS of point's SVG element:
chart.series[0].groupedData[0].graphic.css({
color: 'red'
});
Live demo: http://jsfiddle.net/BlackLabel/9ey2yq3u/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
I have sometimes very long subtitles in my charts. Ideally I want to expand/collapse part of the subtitle.
If I use ang-accordion outside of the highcharts subtitle, it works correctly
https://github.com/sherwaniusman/angular-accordion
If I try to use it in the subtitle however (in highcharts.net) it doesn't show me text1, nor is anything clickable.
var subtitle = string.Format("<ang-accordion><collapsible-item item-title='{0}'><div>{1}</div></collapsible-item></ang-accordion>",text1, text2);
subtitle = new Subtitle { UseHTML = true,Text = subtitle, Align = HorizontalAligns.Left },
Is it feasible to use expand/collapse functionality in the subtitle?
Per the documentation it does not look like angular tags are supported. Taken from here:
Texts and labels in Highcharts are given in HTML, but as the HTML is
parsed and rendered in SVG, only a subset is supported. The following
tags are supported: b, strong, i, em, br/, span. Spans can
be styled with a style attribute, but only text-related CSS that is
shared with SVG is handled.
When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.