score:1
I couldn't find the best answer to your first question. However you can define multiple datasets with no intersection and use different colours (see the point 2) for that one.
http://valor-software.com/ng2-charts/
For the second one when you define colours, as you are already doing it in your code:
chartColors: [{
backgroundColor: 'rgba(25,10,24,0.2)',
borderColor: 'rgba(225,10,24,0.2)',
pointBackgroundColor: 'rgba(225,10,24,0.2)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(225,10,24,0.2)'
}
The last number in rgba
is the opacity. For having different colours the option is to define multiple datasets, otherwise it randomises the colours and you won't get mixed ones. A plunker here:
http://plnkr.co/edit/9PckMZiDYZjRz1PA0Suq
For the last question regarding getting the value of x-axis, look at the event which is logged to console on bounded events.
Source: stackoverflow.com
Related Query
- How to display the labels in doughnut chart using ng2 charts?
- chart js with angular2 loading dynamic data only after zoomin
- ng2 chart multiple chart update
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- ng2 charts bar chart need spacing between 2 bars in series Angular
- Angular + Ng2 Charts: Chart not displaying as Child Component
- Ng2 charts - Animation doesn't work on line chart onInit
- ng2 scatter chart how to put labels in x axis
- VueJS + Chartjs - Chart only renders after code change
- How do I destroy/update Chart Data in this chart.js code example?
- display ng2 chart when the property of data returned is >=0
- PrimeNg chart label rotation with Angular2
- getting additional value fields from data source for dx.chartjs doughnut chart
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Duplicate of legends are Produced in ng2 chart
- How to change label color of ng2 chart in angular
- How to add space between datasets in ng2 doughnut chart
- Getting the HTML code of a chart created by chart.js
- How to run Chart.js samples using source code
- how to not repeat code while creating multiple charts in chart js
- Set height of chart in Chart.js
- Dynamically update values of a chartjs chart
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- In Chart.js set chart title, name of x axis and y axis?
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
More Query from same tag
- setting QuickCharts color
- Is it possible to add a custom font to chart js?
- how to make realtime update chart like in package express-status-monitor?
- Add dynamic data in a demo chart.js file of a django template
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- Single bar with background Chart.js
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- Two charts using same options, but I need different titles for the charts
- ChartJS: how to make a bar chart with a horizontal guideline:
- Adding a for loop/foreach loop for Charts.js
- Chart.js Radar chart multiple datasets
- How to get a square grid in Chart.js with responsive scatter chart?
- Chartjs graphs are not respecting height of container
- ChartJS version 3 how to add percentage to pie chart tooltip
- Chart.js custom tooltipTemplate index
- Make a chart clickable when placed under another SVG <View>
- Chart.JS To Not Start At 0
- How to set global/specific properies when updating line-chart using Chart.js?
- chartjs: How to plot multi-line chart with irregular intervals
- chart.js: segment true is not working in labels outside pie chart : chart.piecelabel.js
- Wrong display of xAxes in Chartjs
- Chart.js - Avoid line to goes to zero and remove dot for this situation
- Chartjs-node installation failing
- Chart.js only displays font changes upon hover
- Using Chart.js with Dates as x-Axis labels
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- Create Chart using Reactjs Chartjs and axios
- ng2-charts How to get the result of multiple push?
- Chart.js color is not getting changed
- How do you hide the title of a chart tooltip?