I have Highstock graphics with an array of series objects. I d'like to display all my series into navigator. By the way, I use Angular.js and ng-Hghicharts.
I saw that solution is to add series after chart generation.
How can i do it ?
For multiple series in navigator, you need to use workaround with addSeries functions.
window.chart.addSeries({
name : "",
xAxis: 0,
yAxis: 1,
type: "line",
enableMouseTracking: false,
data : new_data,
showInLegend:false
});
http://jsfiddle.net/6fFwM/
Related
I have multiple lines to be displayed. When I load stock chart for the first time, navigator and scroll window's behavior is okay.
DEMO : https://stackblitz.com/edit/js-a8exhr?file=index.js
But when I press 1m, 1d, 1h etc options, it starts misbehaving and doesn't draw two lines in navigator.
Currently my settings are,
series: seriesOptions,
navigator: {
series: [
{
data: seriesOptions[0].data,
},
]
I tried with,
series: seriesOptions,
navigator: {
series: seriesOptions
]
but it is misbehaving.
I want it to behave like this : https://www.highcharts.com/demo/stock/compare
NOTE: I'm using lazy loading feature when I click on 1d, 1m etc options.
Options for navigator and series from the chartOptions.js file are lost because of merging. You can disable dataGrouping in plotOptions and move navigator config to one place.
plotOptions: {
series: {
showInNavigator: true,
dataGrouping: {
enabled: false
}
}
}
Live demo: https://stackblitz.com/edit/js-jjbgne?file=chartOptions.js,index.js
Is it anyhow possible to set the label into the bar chart?
Like this example:
I couldnt find an example on the official page: Official example page
//EDIT
Later I had other problems, but I was able to solve them by switching to Nivo Charts. Nivo Charts
You could do this using label options in this way:
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
padding: -110
}
}
]
}
}
The result is:
This is a codesandbox example.
You can use the LabelList component with a custom render, here is the link of the documentation:
https://recharts.org/en-US/api/LabelList
also you can use the position property to center it inside the bar , here is an example of a customized LabelList :
https://recharts.org/en-US/examples/BarChartWithMinHeight
enter image description here
Trying to use Quill in my project. I'm using Bootstrap class 'row' with two columns. Right hand side column has Quill, everything works fine except this equation box (see in the image). Can anybody help?
I solved this using bounds. Here is the code snippet:
let quill = new Quill('#editor-container', {
modules: {
formula: true,
syntax: true,
toolbar: '#toolbarOptions'
},
placeholder: 'Compose your question here...',
theme: 'snow',
bounds: '#editor-container'
});
how to make dual y axis chart using google chart in angular js?
could you please any one help me out how to make it?
like : example
$scope.myChartObject1 = {};
$scope.myChartObject1.type = "ColumnChart";
$scope.myChartObject1.data = ['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1];
<div google-chart chart="myChartObject" on-select="getTheValue(selectedItem)" style="height:421px; width:100%;"></div>
Thanks in advance
The google documentation shows examples with the new Material Charts instead of the older chart classes. With the older charts (ColumnChart, BarChart), use something like this:
$scope.chartObject.options = {
vAxes: {
0: {title: "Inventory"},
1: {title: "Sales" }
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
}
};
I also have a CodePen example that was meant for image overlays, but it also happens to use Dual-Y options.
I attach a page with dhtmlxCalendar in dhtmlxWindow. And calendar is cut.
Main page:
dhxWins = new dhtmlXWindows();
popupWindow = dhxWins.createWindow("newcontact_win", 0, 0, 330, 270);
popupWindow.center();
popupWindow.attachURL("calendar.html");
Attached page:
formData = [{type: "calendar", dateFormat: "%d-%M-%Y", serverDateFormat: "%Y-%m-%d", name: "start_date", label: "Calendar", readonly: true, calendarPosition: "right"}];
myForm = new dhtmlXForm("myForm", formData);
Your calendar renders within the most nested iframe, which has smaller dimension than calendar. Physically impossible to draw calendar inside such small area.
To get calendar visible normally you need to build your code without using iframes (i.e. without using attachURL), then it must rendered good.