I would like to install and use the normal highcharts plugin inside the web components. Is there a way to create instances and using this instance using higcharts methods and events.
Using lit-element Highcharts and its modules can be loaded like following:
import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';
Component config:
import { LitElement, html } from 'lit-element';
import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';
class ChartTest extends LitElement {
firstUpdated(changedProperties) {
this._enableChart();
}
render() {
return html`
<div id='container' style='width:500px;height:300px;border: 1px red solid;'>sfsdfs</div>
`;
}
_enableChart() {
Highcharts.chart(this.shadowRoot.querySelector('#container'), {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
type: 'column'
}]
});
}
}
Demo:
https://jsfiddle.net/BlackLabel/e3rptzg2/
Related
I have tried using my own custom image url for the context menu, however, the hover does not align with the actual image itself. It is similar to this: http://jsfiddle.net/858m3kxv/
You can see in the fiddle that the hover is misaligned. Can someone help me with this? Thanks in advance!
title: {
text: 'Custom context menu symbol'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
exporting: {
buttons: {
contextButton: {
symbol: 'url(https://www.highcharts.com/images/ico/favicon-192x192.png)'
}
}
}
});
You can position the image by using symbolX and symbolY properties.
exporting: {
buttons: {
contextButton: {
symbol: 'url(https://www.highcharts.com/images/ico/favicon-192x192.png)',
symbolX: 18,
symbolY: 18
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/qLc7fxap/
API Reference: https://api.highcharts.com/highcharts/exporting.buttons.contextButton.symbolX
I want to make last point blinking in high-stock. But there is no feature for that.
Can I do it by java-script?
One way you could achieve this is to assign a custom class to your last point, and do some CSS for that point to make it blink.
Assigning a custom class to a point can be done like this
series: [{
data: [29.9, 71.5, {y: 54.4, className: 'customClass'}],
}]
Here, the last point as been assigned to with the class customClass. Then we use some CSS magic taken from this answer. And we get a blinking last point:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, {y: 54.4, className: 'customClass'}],
marker: {
radius: 10
}
}]
});
.customClass {
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 250px"></div>
JSFiddle example: https://jsfiddle.net/ewolden/jr2x64t8/9/
I want to show cross hair by default in high chart not any event but it should always be there. How to show crosshair at every x-axis point in highchart?
Using highcharts api
The mouse course will change to crosshair when over a point on the chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'crosshair',
events: {
click: function () {
alert('You just clicked the graph');
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
using api jsfiddle
Using jquery
This will make the mouse cursor be a cross hair whenever its on the graph.
$("#container").css( 'cursor', 'crosshair' );
using jquery jsfiddle
I want to export a highchart to a jpeg image and place it into a specific folder.
What is the flow that goes through the highscript.js?
You can export into jpeg ,but it renders on browser as api did not provide location .
API URL :http://api.highcharts.com/highcharts#exporting
and
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
You can prepare your own server (http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts) and define directory, where exported file should be saved, but you have no ability to have influence on customer / client direction (security aspects).
I upgraded to HighCharts version 3.0.0 today and am having some issues with animation. The web application I am working on is built for IE 9. I am getting no animation in IE but when running chrome the animation still renders for my application. I can however view highcharts demos in IE 9 on the official site with full animation.
chartVar = document.createElement('div');
chartVar.setAttribute('id', 'container');
chartVar.style.width = '400px';
chartVar.style.height = '200px';
document.getElementById('quad0').appendChild(chartVar);
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});