I am using ionic 4 with Highcharts. Everything is working perfectly apart from me not being able to customise the charts through my component's css. I've tried a couple of things but cannot get it to work.
Is there anything I should be adding in the scss to make it be applied on the graph?
A summary of the component:
In my component.ts:
import * as HighCharts from 'highcharts';
#Component({
styleUrls: ['./component.scss'],
selector: 'my-component',
templateUrl: 'component.html'
})
In my component.html:
<div id="container" style="display: block;"></div>
In my component.scss:
.highcharts-loading {
background: silver;
}
.highcharts-loading-inner {
color: blue;
}
Unfortunately, you can add styles only globally. So inside angular-cli.json add CSS file for the chart - example below chart-styles.css:
{
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"prefix": "app",
"styles": ["styles.css", "chart-styles.css"],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
}
If you want to use only CSS styles to style your chart you can enable styled mode:
chartOptions = {
chart: {
styledMode: true
}
}
Demo:
style mode: https://codesandbox.io/s/cqxuh
https://codesandbox.io/s/angular-3v41p
Docs:
https://www.highcharts.com/docs/chart-design-and-style/style-by-css
in Highcharts you need to use useHTML property to make things happen.
I'm not familiar with ionic but I had the same issue and the following helped
plotOptions: { series: { dataLabels: { useHTML: true, } } }
Related
I am using ag-grid table for first time. I am not able to change the default font size of row cells(Not header portion). I want to change the font size of row cells(row data). I am using ag-theme-alpine.
Here is the code which I am using.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
],
rowData: [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
]
}
}
render() {
return (
<div
className="ag-theme-alpine"
style={{ height: '500px', width: '100%',fontSize:'20px' }}
>
<AgGridReact
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Please suggest a good solution.
You can do this in the ColDef by setting the cellStyle property in ColDef. You can set the font size as follows
columnDefs: [
{
headerName: 'Make',
field: 'make',
cellStyle: {fontSize: '11px'}
}
]
You can override the font size via CSS. Ag-Grid's CSS sets the font at the row level, and unfortunately it has an !important tag. Providing a higher selector specificity should do the trick:
div.ag-theme-alpine div.ag-row {
font-size: 12px !important;
}
You can set font-size and other parameters globally by customizing a theme: React Data Grid: Customising Themes
Define the style parameters in the styles.scss file like this:
.ag-theme-alpine {
#include ag-theme-alpine((
font-size: 10px,
));
}
ag-grid community v20, Angular 7.
I have a working ag-grid in my Angular 7 app. I want to display an image in a column. The https address is contained in the columns field. I've searched ag-grid's documentation and the web and have not found an example of this basic scenario. Can someone give a code example for the columnDef. Is cellRenderer the way to do this?
{ headerName: 'Select', field: 'Image', width: 75, sortable: false,
cellRenderer: '<span><img border="0" width = "15" height="10" src=xxxx ></span>' },
It is a multi-step process.
See Learn to customize Angular grid in less than 10 minutes
Create a custom component. 'ImageFormatterComponent.ts'
import { Component } from "#angular/core";
#Component({
selector: 'app-image-formatter-cell',
template: `<img border="0" width="50" height="50" src=\"{{ params.value }}\">` })
export class ImageFormatterComponent {
params: any;
agInit(params: any){
this.params = params;
}
}
Register in the app.module.ts
import { ImageFormatterComponent } from "./album/ImageFormatterComponent";
#NgModule({
declarations: [ImageFormatterComponent],
imports: [
AgGridModule.withComponents([ImageFormatterComponent])
],
In the component you are using it in:
import { ImageFormatterComponent } from "./ImageFormatterComponent";
columnDefs = [
{ headerName: 'Select',
field: 'Image',
width: 60,
sortable: false,
autoHeight: true,
cellRendererFramework: ImageFormatterComponent
}
I am using high chart wrapper in my angular5 app with the help of below link.
high chart wrapper
but how can I use addSeries() to add series into the existing chart and how can I update the properties of existing chart.
how can I use addSeries() to add series into the existing chart and
how can I update the properties of existing chart.
When using highcharts-angular wrapper it is not recommended to use chart methods like addSeries() or update() directly on chart reference.
You have to update a whole component, not only chart properties. It can be achieved by updating chartOptions object (add new series, point, title etc) and setting updateFlag = true. Check the code and demo posted below.
app.module.ts:
import { BrowserModule } from "#angular/platform-browser";
import { NgModule } from "#angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent, ChartComponent],
imports: [BrowserModule, HighchartsChartModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
chart.component.html:
<div class="boxChart__container">
<div>
<highcharts-chart
id="container"
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
[callbackFunction]="chartCallback"
[(update)]="updateFlag"
[oneToOne]="true"
style="width: 100%; height: 400px; display: block;"
>
</highcharts-chart>
<button (click)="updateChart()">Update Chart</button>
</div>
</div>
chart.component.ts:
import { Component, OnInit } from "#angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
#Component({
selector: "app-chart",
templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
title = "app";
chart;
updateFlag = false;
Highcharts = Highcharts;
chartConstructor = "chart";
chartCallback;
chartOptions = {
series: [
{
data: [1, 2, 3, 6, 9]
}
],
exporting: {
enabled: true
},
yAxis: {
allowDecimals: false,
title: {
text: "Data"
}
}
};
constructor() {
const self = this;
this.chartCallback = chart => {
// saving chart reference
self.chart = chart;
};
}
ngOnInit() {}
updateChart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15]
},
{
data: [12, 15, 10]
}
];
self.chartOptions.title = {
text: "Updated title!"
};
self.updateFlag = true;
}, 2000);
}
}
Demo:
https://codesandbox.io/s/oomo7424pz
Docs reference:
updateFlag - https://github.com/highcharts/highcharts-angular#options-details
here is a very useful answer for learning how to updata a highchart.
https://www.highcharts.com/demo/chart-update
it explains a method chart.update
chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
});
For adding series the following method is used
chart.addSerie(serie,true);
flag 'true' here is equivalent to chart.redraw();
OR
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: array.name,
data: array.value
});
If you are going to add several series you should set the redraw flag to false and then call redraw manually after as that will be much faster.
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: 'Bill',
data: [1,2,4,6]
}, false);
chart.addSeries({
name: 'John',
data: [4,6,4,6]
}, false);
chart.redraw();
For more information and methods you can visit the Official Highcharts API page:
https://api.highcharts.com/class-reference/Highcharts.Chart
When using angular-highcharts wrapper as
import { Chart } from 'angular-highcharts';
create charts as below
chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
},
credits: {
enabled: false
},
series: [
{
name: 'Line 1',
data: [1, 2, 3]
}
]
});
now you can call all API methods on this
had a tough time trying to get ng2-highcharts and angular2 to work nicely together.
what I have is;
import * as Highcharts from 'highcharts';
window['Highcharts'] = Highcharts;
bootstrap(AppComponent);
SystemJS Config;
map: {
"highcharts": "node_modules/highcharts/highcharts.js",
"ng2-highcharts": "node_modules/ng2-highcharts",
}
as you can see, this is quite a hack but its the only way I could get it working - when I remove the manual window assignment, I get
ReferenceError: Highcharts is not defined
at Ng2Highcharts.Object.defineProperty.set
So my question is, surely there is a better way? Any ideas?
I am using it like so;
import { Component, OnInit } from 'angular2/core';
import { Ng2Highcharts } from 'ng2-highcharts/ng2-highcharts';
#Component({
selector: 'component',
styleUrls: ['.comp.css'],
templateUrl: '.comp.html',
directives: [Ng2Highcharts]
})
Thanks
I have slightly modified the original implementation of ng2-highcharts I retreived few months ago to overcome some issues (I had to use jQuery - probably the most current version of the package does not need any twick any more). In any case this is the code of the directive I use
/// <reference path="../../typings/highcharts/highcharts.d.ts" />
declare var jQuery: any;
import {Directive, ElementRef, Input} from 'angular2/core';
#Directive({
selector: '[ng2-highcharts]'
})
export class Ng2Highcharts {
hostElement: ElementRef;
chart: HighchartsChartObject;
constructor(ele: ElementRef) {
this.hostElement = ele;
}
#Input('ng2-highcharts') set options(opt:HighchartsOptions) {
if(!opt) {
console.log('No valid options...');
console.log(opt);
return;
}
if(opt.series || opt.data) {
let nativeEl = this.hostElement.nativeElement;
let jQ = jQuery(nativeEl);
this.chart = jQ.highcharts(opt);
} else {
console.log('No valid options...');
console.dir(opt);
}
}
}
In index.html I have
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
ng2Highcharts: {
format: 'register',
defaultExtension: 'js'
},
.....
.....
}})
and
<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/highcharts/highstock.js"></script>
<script src="./lib/highcharts/modules/exporting.js"></script>
<script src="./lib/highcharts/highcharts-more.js"></script>
In the components that need to use the directive the html code looks like the following:
<div [ng2-highcharts]="chartOptions"></div>
chartOptions are created with code like this
createNewchartOptions() {
return {
title: {text: "Performance vs Benchmark (" + this.periodText + ")"},
rangeSelector: {
selected: 4},
xAxis: {
type: 'datetime'
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'}]
},
plotOptions: {
series: {
compare: 'percent'}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2}
};
}
Last thing you need to do is to set the series in the chartOptions (I do not put code since too linked to my app).
I hope this helps
I need to disable the hover attribute of legend items because I am using Highcharts on mobile platforms. Sadly, making a legendItemClick event does not solve the problem as hovering still occurs.
I was encouraged to see that this issue came up on the old support site for highcharts back in 2011. The thread can be found here. I was particularly glad to see the last jfiddle example and the function declared in it.
Unfortunately, the only thing that worked for me was the workaround of changing the setHoverStyle to null. This isn't great though since the hover action still fires and makes navigating the legend and chart unresponsive. The rest of the suggestions in the above thread resulted in the chart not being rendered.
Granted, it might be because I had a difficult time translating the example to my purposes - honestly, I do not know where to call the function and everywhere I have tried has failed. My JavaScript file is set up along the lines of
var chartDefinition = {
chart: {
renderTo: 'chart_content',
type: 'column'
},
colors: [
'#619ED6',
'#6BA547',
'#F7D027',
'#E48F1B',
'#B77EA3',
'#E64345',
'#60CEED',
'#9CF168',
'#F7EA4A',
'#FBC543',
'#FFC9ED',
'#E6696E'
],
title: {
text: ''
},
...
column: {
shadow: false,
borderWidth: 1,
events: {
click: function() { return false; },
legendItemClick: function() { return false; }
},
dataLabels: {
enabled: false,
color: '#222',
style: {
fontFamily: 'sans-serif',
fontSize: '13px',
fontWeight: 'bold'
}
}
}
},
series: []
};
Listing and setting the various highcharts attributes.
Does anyone know how to disable this hover attribute or where the proper place would be to call the function?
There are a few solutions to implement this. There's no built-in option to change that (as of 06.2022).
Try to disable mouseover for legendGroup, not legendItem.
Demo: http://jsfiddle.net/Cp7xh/10/
Disable pointer-events in CSS:
.highcharts-legend {
pointer-events: none;
}
Demo: http://jsfiddle.net/BlackLabel/ebrodhk4/
A plugin that prevents Highcharts Core from adding events:
Plugin:
(function(H) {
H.wrap(
H.Legend.prototype,
'init',
function(proceed, chart, options) {
if (options.enableMouseTracking === false) {
this.setItemEvents = false;
}
proceed.apply(this, [chart, options]);
}
);
})(Highcharts);
Usage:
legend: {
enableMouseTracking: false,
itemStyle: {
cursor: 'auto'
}
},
Demo: https://jsfiddle.net/BlackLabel/ogqv2sya/