A basic bar chart with a specified color and values through the chart-column directive. The
4 | other directive shown
5 | is the chart-bar directive. In this case we specify the ration of the bar width in relation to
6 | the total available with.
7 | A value smaller than 1 gives more space.
9 | <c3chart bindto-id="chart1" show-labels="true"> 10 | <chart-column column-id="bar1" 11 | column-name="Bar 1" 12 | column-color="green" 13 | column-values="30,200,100,400,150,250" 14 | column-type="bar"/> 15 | <chart-bar ratio="0.8"/> 16 | </c3chart> 17 |18 |
In the next example we add a second column, or better bar. This time we also add a chart-column
31 | for x values. We have to specify
32 | this column as a type Category in the chart-axis-x directive.
34 | <c3chart bindto-id="chart2" show-labels="true"> 35 | <chart-column column-id="x" 36 | column-values="period 1,period 2,period 3,period 4,period 5,period 6"/> 37 | <chart-column column-id="bar1" 38 | column-name="Bar 1" 39 | column-color="green" 40 | column-values="30,200,100,400,150,250" 41 | column-type="bar"/> 42 | <chart-column column-id="bar2" 43 | column-name="Bar 2" 44 | column-color="red" 45 | column-values="50,100,200,300,350,450" 46 | column-type="bar"/> 47 | <chart-bar width="10"/> 48 | <chart-axes values-x="x"/> 49 | <chart-axis> 50 | <chart-axis-x axis-position="outer-center" 51 | axis-label="The periods" 52 | axis-type="category"/> 53 | </chart-axis> 54 | </c3chart> 55 |56 |
If you have a bar chart with multiple chart-columns, the default behavior is to place the bars next to each
82 | other. You can also group the bars so that are stacked. That is what the following example shows. Using the
83 | chart-group directive we can use the group-values attribute. Give it a comma
84 | separated column id's that need to be grouped.
86 | <chart-group group-values="bar1,bar2"/> 87 |88 |
Now to show that you can also create a button to use grouping or not, we use the callback feature of the 115 | library
116 |In the next example we show that it is possible to have dynamic data fields while still using category 145 | labels for the x-axis.
146 |147 | <c3chart bindto-id="chartGroupDataPoints" chart-data="vm.datapoints" chart-columns="vm.datacolumns" 148 | chart-x="vm.datax"> 149 | <chart-bar ratio="0.5"/> 150 | <chart-axes values-x="x"/> 151 | <chart-axis> 152 | <chart-axis-x axis-position="outer-center" 153 | axis-label="The numbers" 154 | axis-type="category"/> 155 | </chart-axis> 156 | </c3chart> 157 |158 |
163 | vm.datapoints = [
164 | {"x": "one", "top-1": 10, "top-2": 12},
165 | {"x": "two", "top-1": 11, "top-2": 13},
166 | {"x": "three", "top-1": 12, "top-2": 14},
167 | {"x": "four", "top-1": 13, "top-2": 15},
168 | {"x": "five", "top-1": 14, "top-2": 16}
169 | ];
170 | vm.datacolumns = [{"id": "top-1", "type": "bar", "name": "Top one"},
171 | {"id": "top-2", "type": "bar", "name": "Top two"}];
172 | vm.datax = {"id": "x"};
173 |
174 | In the next example we show that it is possible to have dynamic data fields while still using category 194 | labels for the x-axis.
195 |196 | <c3chart bindto-id="chartGroupDataPoints" chart-data="vm.rescalezoomdatapoints" chart-columns="vm.datacolumns" 197 | chart-x="vm.datax" enable-zoom="true" rescale-zoom="true"> 198 | <chart-bar ratio="0.5"/> 199 | <chart-axes values-x="x"/> 200 | <chart-axis> 201 | <chart-axis-x axis-position="outer-center" 202 | axis-label="The numbers" 203 | axis-type="category"/> 204 | </chart-axis> 205 | </c3chart> 206 |207 |
212 | vm.rescalezoomdatapoints = [
213 | {"x": "one", "top-1": 10, "top-2": 12},
214 | {"x": "two", "top-1": 13, "top-2": 11},
215 | {"x": "three", "top-1": 2, "top-2": 3},
216 | {"x": "four", "top-1": 3, "top-2": 5},
217 | {"x": "five", "top-1": 4, "top-2": 3},
218 | {"x": "six", "top-1": 5, "top-2": 5},
219 | {"x": "seven", "top-1": 3, "top-2": 6},
220 | {"x": "eight", "top-1": 2, "top-2": 4},
221 | {"x": "nine", "top-1": 17, "top-2": 12},
222 | {"x": "ten", "top-1": 10, "top-2": 18}
223 | ];
224 |
225 | vm.datacolumns = [{"id": "top-1", "type": "bar", "name": "Top one"},
226 | {"id": "top-2", "type": "bar", "name": "Top two"}];
227 | vm.datax = {"id": "x"};
228 |
229 | There are a number of events available to interact with your charts. There are two different levels of 4 | events. There are events related to the complete chart like mouseover and mouseout, but also on initialize 5 | and on render. You can register a callback to these events. But there are also events more related to the 6 | plotted data. You can respond to clicks on data points, but also on mouseovers and mouseout. All these 7 | callbacks are registered using the chart-events directive. In the example we show the on-data-click 8 | attribute. The other callback attribute are: on-init, on-mouseover, on-mouseout, 9 | on-resize, on-resized, on-rendered, on-click-data, 10 | on-mouseover-data and on-mouseout-data.
11 |12 | <c3chart bindto-id="interactive-plot1-chart" show-labels="false"> 13 | <chart-column column-id="data1" 14 | column-name="Data 1" 15 | column-values="70" 16 | column-type="donut"/> 17 | <chart-column column-id="Data 2" 18 | column-values="35" 19 | column-type="donut"/> 20 | <chart-column column-id="Data 3" 21 | column-values="60" 22 | column-type="donut"/> 23 | <chart-donut title="Donut" width="60"/> 24 | <chart-events on-click-data="vm.showClick(data)"/> 25 | </c3chart> 26 |27 |
28 | function CallbackCtrl() {
29 | var vm = this;
30 | vm.clicked = {};
31 |
32 | vm.showClick = showClick;
33 |
34 | function showClick(data) {
35 | vm.clicked = data;
36 | }
37 | }
38 |
39 |
40 | Data clicked: Name {{vm.clicked.name}}, Value {{vm.clicked.value}} 59 |
60 |In the next sample we are demonstrating the use of the callback function. C3js comes with the option to call
64 | some api methods of the chart object Using this callback function the chart is returned to expose this c3js
65 | api. It also shows loading the data from the controller instead of using the chart-column
66 | directive.
68 | <c3chart bindto-id="dynamicpie" chart-data="vm.piePoints" chart-columns="vm.pieColumns" 69 | callback-function="vm.handleCallback"/> 70 | <md-button class="md-raised" ng-click="vm.toggleLegend()">Toggle legend</md-button> 71 |72 |
73 | function CallbackCtrl() {
74 | var vm = this;
75 |
76 | vm.piePoints = [{"data1": 70, "data2": 30, "data3": "100"}];
77 | vm.pieColumns = [{"id": "data1", "type": "pie"}, {"id": "data2", "type": "pie"}, {
78 | "id": "data3",
79 | "type": "pie"
80 | }];
81 |
82 | vm.handleCallback = function (chartObj) {
83 | vm.theChart = chartObj;
84 | };
85 |
86 | vm.legendIsShown = true;
87 | vm.toggleLegend = function() {
88 | if (vm.legendIsShown) {
89 | vm.theChart.legend.hide();
90 | } else {
91 | vm.theChart.legend.show();
92 | }
93 | vm.legendIsShown= !vm.legendIsShown;
94 | vm.theChart.flush();
95 | };
96 | }
97 |
98 | The next sample is a bit more complicated, this time we have two charts with the first chart 110 | influencing the content of the second chart. If an item in the first pie is selected, items for the 111 | second pie will be obtained. In the sample the data points are hard coded but of course they can 112 | come from somewhere else.
113 |114 | <c3chart bindto-id="interactivepie1" chart-data="vm.piePoints" chart-columns="vm.pieColumns"> 115 | <chart-events on-click-data="vm.selectItem(data)"/> 116 | </c3chart> 117 | <c3chart bindto-id="interactivepie2" chart-data="vm.piePointsSelected" chart-columns="vm.pieColumnsSelected"> 118 | </c3chart> 119 |120 | 121 |
122 | vm.piePoints = [{"data1": 70, "data2": 30, "data3": "100"}];
123 | vm.pieColumns = [{"id": "data1", "type": "pie"}, {"id": "data2", "type": "pie"},
124 | {"id": "data3","type": "pie"}];
125 |
126 | vm.piePointsSelected = [];
127 | vm.pieColumnsSelected = [];
128 |
129 | function selectItem(data) {
130 | vm.selected = data;
131 | if (data.name === 'data1') {
132 | vm.piePointsSelected = [{'data11':35},{'data12':40},{'data13':10}];
133 | vm.pieColumnsSelected = [{'id':'data11','type':'pie'},{'id':'data12','type':'pie'},{'id':'data13','type':'pie'}]
134 | } else if(data.name === 'data2') {
135 | vm.piePointsSelected = [{'data21':65},{'data22':80}];
136 | vm.pieColumnsSelected = [{'id':'data21','type':'pie'},{'id':'data22','type':'pie'}];
137 | } else if (data.name === 'data3') {
138 | vm.piePointsSelected = [{'data31':95},{'data32':10}];
139 | vm.pieColumnsSelected = [{'id':'data31','type':'pie'},{'id':'data32','type':'pie'}];
140 | }
141 | }
142 |
143 | Click on the pie diagram above to select values belonging to that part of the pie.
155 |In this sample we demonstrate having dynamic values in a pie diagram. Next to that we show how to use 161 | the events in the legend. By clicking the legend we increase the value if that specific column.
162 |Below the code, first the pie with dynamic columns and next the code for the event callback 163 | function.
164 |165 | <c3chart bindto-id="interactivelegend" chart-data="vm.piePointsLabel" chart-columns="vm.pieColumnsLabel"> 166 | <chart-legend on-click="vm.clickLegend(data)" legend-inset="top-right" 167 | legend-inset-x="50" legend-inset-y="50" legend-inset-step="5"/> 168 | </c3chart> 169 |170 | 171 |
172 | vm.piePointsLabel = [{"data1": 1, "data2": 1}];
173 | vm.pieColumnsLabel = [{"id": "data1", "type": "pie"}, {"id": "data2", "type": "pie"}];
174 |
175 | function clickLegend(data) {
176 | vm.piePointsLabel[0][data]+=1;
177 | }
178 |
179 |
180 | Another feature is that we can add a grid to the chart. We return to our one line of data chart and now add a 6 | horizontal grid. In the sample we add a horizontal grid, set show-y to true. But we also add two 7 | extra lines with a label. We have to configure the axis to use, the value to draw the line for and the label 8 | to place on top of the line.
9 | 10 |11 | <c3chart bindto-id="chart3"> 12 | <chart-column column-id="line 1" 13 | column-values="30,200,100,400,150,250" 14 | column-type="line"/> 15 | <chart-grid show-x="false" show-y="true"> 16 | <chart-grid-optional axis-id="y" grid-value="20" grid-text="Minimum" position="start"/> 17 | <chart-grid-optional axis-id="y" grid-value="200" grid-text="Maximum" grid-class="top-item"/> 18 | </chart-grid> 19 | </c3chart> 20 |21 |
You can hide the legend using the show-legend attribute. A more interesting property is the legend-position 34 | attribute. Legitimate values for this property are: bottom, right and inset. When inset is used you can also 35 | configure where to place the legend using one of the following values:top-left, top-right, bottom-left, 36 | bottom-right.
37 |38 | <c3chart bindto-id="chart-configure-legend"> 39 | <chart-column column-id="line 1" 40 | column-values="30,200,100,400,150,250" 41 | column-type="line"/> 42 | <chart-grid show-x="false" show-y="true"> 43 | <chart-grid-optional axis-id="y" grid-value="20" grid-text="Minimum"/> 44 | <chart-grid-optional axis-id="y" grid-value="200" grid-text="Maximum"/> 45 | </chart-grid> 46 | <chart-legend legend-position="inset" legend-inset="top-left"/> 47 | </c3chart> 48 |49 |
When moving you cursor over the chart points, you get a tooltip with the line name and the value. If you have 63 | multiple lines by default you see all the values for the same horizontal item. Using this directive you can hide the 64 | tooltip, but you can also disable the grouping of values. That way you only get the value for the line your cursor 65 | is on.
66 |67 | <chart-tooltip group-tooltip="false"/> 68 |69 |
By default the chart fits within the space you give it. Maybe you have a good reason to explicitly set the size of a 86 | chart. This can be done with the chart-size directive. It has two attributes, chart-width and chart-height 87 |
88 | 89 |104 | <chart-size chart-width="200" chart-height="200"/> 105 |106 |
With each chart-column you can specify a color. So why more color configuration. With this directive you can give a 109 | number of colors to use throughout the graph. That way you do not specify which color to take, but you do specify the 110 | colors to chose from.
111 | 112 |126 | <chart-colors color-pattern="green,blue,red,yellow"/> 127 |128 | 129 |
Welcome to the tutorial for using the c3js angular directives. We created these directives to make it easier to 4 | integrate graphs in your AngularJS project.
5 | 6 |If you want to run this tutorial you have to run this as a website. There are a few ways you can do this. For all 9 | means you have to get a copy from this github 10 | repository. You can download the zip/tar or clone the repository.
11 |python -m SimpleHTTPServer 8000grunt devserverBefore you can show your graphs, you need to do the boilerplate stuff. You have to create an html page that loads the 18 | appropriate javascript libraries and stylesheets. The next code block shows this very basic html page.
19 | 20 |21 | <html lang="en" ng-app="graphApp"> 22 | <head> 23 | <link href="assets/css/c3.min.css" rel="stylesheet" type="text/css"/> 24 | </head> 25 | <body ng-controller="GraphCtrl"> 26 | 27 | <script src="assets/js/d3.min.js" charset="utf-8"></script> 28 | <script src="assets/js/c3.min.js"></script> 29 | <script src="assets/js/angular.min.js"></script> 30 | <script src="assets/js/c3-angular.min.js"></script> 31 | 32 | <script src="assets/js/app.js"></script> 33 | </body> 34 | </html> 35 | 36 |37 | 38 |
Besides the html we also need a bit of JavaScript to initialize the application. The next code block shows 39 | initilizing the app and a controller.
40 |
41 | var graphApp = angular.module('graphApp', ['gridshore.c3js.chart']);
42 |
43 | graphApp.controller('GraphCtrl', function ($scope) {
44 |
45 | });
46 |
47 | That is it, before we move on to your first graph lets have a look at the different directives that are available. 48 | The main element is c3chart. All other directives are children of this element. This directive has a few 49 | attributes to configure the chart. The most important attribute is the bind-id, if you want multiple graphs 50 | on one page, this has to be unique. Other attributes are padding-top/right/left/bottom, 51 | show-labels, show-subchart and enable-zoom
52 |A donut is almost a pie, but without the middle. Threfore it has the same configuration options. One 4 | additional attribute is the title. This gives you a title in the middle of the donut. In the 5 | example below we also demonstrate formatting the label using a function. With the function we replace the 6 | percentage sign with the dollar sign.
7 | 8 |9 | <c3chart bindto-id="donut-plot1-chart"> 10 | <chart-column column-id="Data 1" 11 | column-values="70" 12 | column-type="donut"/> 13 | <chart-column column-id="Data 2" 14 | column-values="35" 15 | column-type="donut"/> 16 | <chart-column column-id="Data 3" 17 | column-values="60" 18 | column-type="donut"/> 19 | <chart-donut title="Donut" width="60" show-label="true" label-format-function="formatDonut" 20 | threshold-label="0.1"/> 21 | </c3chart> 22 |23 |
24 | function DonutCtrl() {
25 | var vm = this;
26 | vm.formatDonut = formatDonut;
27 |
28 | function formatDonut(value, ratio, id) {
29 | return d3.format('$')(value);
30 | }
31 | }
32 |
33 | In the next sample we use data coming from angularjs objects. Also we remove the sorting which is from large
48 | to small by default. And in the chart-donut directive we also configure the width of the donut
49 | and whether to show the label or not. In our case we don't show it.
51 | <c3chart bindto-id="eventchart" chart-data="vm.donutPoints" chart-columns="vm.donutColumns" sort-data="null"> 52 | <chart-legend show-legend="true"/> 53 | <chart-donut expand="true" width="30" show-label="false" title="Donut Title"/> 54 | </c3chart> 55 |56 |
In the next sample we continue with the previous sample, we now make it possible to configure the selection and on data click present the selected columns.
62 |63 | <c3chart bindto-id="eventchart" chart-data="vm.donutPoints" chart-columns="vm.donutColumns" sort-data="null"> 64 | <chart-legend show-legend="true"/> 65 | <chart-donut expand="true" width="30" show-label="false" title="Donut Title"/> 66 | <selection enabled="true"/> 67 | <chart-events on-click-data="vm.handleClick(data)"/> 68 | </c3chart> 69 |70 |
Selected items:
81 |The next chart is really different from all the other charts. Up till now we added the data using chart-column 4 | elements. In a lot of situations this is fine, but what if the data is dynamic of nature. Than we want to 5 | load the data using an angular controller. That is what this sample does. after clicking the button we 6 | generate 10 additional datapoints. Also the chart-columns are taken from a scope parameter. This is all 7 | taken care of using the attributes: chart-data, chart-columns and chart-x.
8 |You can create a gauge using column-type gauge. There are some specific configuration options that you can 4 | provide using the chart-gauge directive.
5 | 6 |7 | <c3chart bindto-id="gauge-plot1-chart"> 8 | <chart-column column-id="Data 1" 9 | column-values="70" 10 | column-type="gauge"/> 11 | <chart-gauge min="50" 12 | max="75" 13 | units=" hours" 14 | width="39" 15 | show-label="true" 16 | expand="true" 17 | /> 18 | </c3chart> 19 |20 | 21 |
35 | <c3chart bindto-id="gauge-plot2-chart" 36 | chart-data="vm.gaugePoint" 37 | chart-columns="vm.gaugeColumn"> 38 | <chart-gauge units=" hours" 39 | width="39" 40 | show-label="true" 41 | expand="true" 42 | /> 43 | </c3chart> 44 |45 |
Now a more complicated example, we use the gauge chart to show how to dynamically change the value of the gauge.
46 |
47 | GaugeCtrl.$inject = ['$interval'];
48 | function GaugeCtrl($interval) {
49 | var vm = this;
50 |
51 | activate();
52 |
53 | function activate() {
54 | vm.gaugePoint = [{"data1": 70}];
55 | vm.gaugeColumn = [
56 | {"id": "data1", "type": "gauge"}];
57 |
58 | $interval(function () {
59 | vm.gaugePoint[0]['data1'] = randomNumber();
60 | }, 1000, 10);
61 |
62 | }
63 |
64 | function randomNumber() {
65 | return Math.floor((Math.random() * 100) + 1);
66 | }
67 | }
68 |
69 |
70 | The next chart shows how to create a basic line chart, there is one additional configuration using the chart-points directive.
4 | You can set the size of the points using this diective.
6 | <c3chart bindto-id="chart1" show-labels="true"> 7 | <chart-column column-id="line1" 8 | column-name="Line 1" 9 | column-color="green" 10 | column-values="30,200,100,400,150,250" 11 | column-type="line"/> 12 | <chart-points point-radius="5" 13 | show-point="true" 14 | point-expand-enabled="true" 15 | point-expand-radius="10"/> 16 | </c3chart> 17 |18 |
Now there are a lot of options available to you to configure. We can add a second line of data, but we can also 30 | configure vertical axes. That is what we will do in the next example. We add a second chart-column 31 | element. This line1 and bar1 axis have a different scale, that is what we configure in the chart-axes 32 | element. The attributes y and y2 which columns use which y axis. If you have more than two 33 | chart-columns you can comma separate them to attach them to the two different vertical axes.
34 |35 | <c3chart bindto-id="chart2"> 36 | <chart-column column-id="line1" 37 | column-name="Line 1" 38 | column-color="red" 39 | column-values="30,200,100,400,150,250" 40 | column-type="spline"/> 41 | <chart-column column-id="bar1" 42 | column-name="Bar 1" 43 | column-color="green" 44 | column-values="50,20,10,40,15,25" 45 | column-type="bar"/> 46 | <chart-axes y="line1" y2="bar1"/> 47 | </c3chart> 48 |49 |
In the next sample we are going to do something else that is cool, we are going to rotate the graph using the directive
65 | chart-axis.
67 | <chart-axis axis-rotate="true"/> 68 |69 |
In the next bar chart we are demonstrating what you can do with formatting ticks. We add multiple 84 | configurations for the x-tick as well as the y-tick.
85 |86 | <c3chart bindto-id="chartTickSample"> 87 | <chart-column column-id="line1" 88 | column-name="Line 1" 89 | column-color="red" 90 | column-values="30,200,100,400,150,250" 91 | column-type="spline"/> 92 | <chart-column column-id="bar1" 93 | column-name="Bar 1" 94 | column-color="green" 95 | column-values="50,20,10,40,15,25" 96 | column-type="bar"/> 97 | <chart-axis> 98 | <chart-axis-x axis-position="outer-center" axis-label="Number by 10" 99 | axis-type="category"> 100 | <chart-axis-x-tick tick-rotate="50"/> 101 | </chart-axis-x> 102 | <chart-axis-y> 103 | <chart-axis-y-tick tick-values="50,100,150,200,250"/> 104 | </chart-axis-y> 105 | </chart-axis> 106 | </c3chart> 107 |108 |
In the next bar chart we are demonstrating what you can do with regions. We add multiple 134 | regions for each line.
135 |136 | <c3chart bindto-id="chartRegionSample"> 137 | <chart-column column-id="line1" 138 | column-name="Line 1" 139 | column-color="green" 140 | column-values="2010,2011,2012,2013,2014,2015" 141 | column-type="line"/> 142 | <chart-column column-id="x1" 143 | column-name="Line 1" 144 | column-color="green" 145 | column-values="30,200,100,400,150,250" 146 | column-type="line"/> 147 | <chart-column column-id="line2" 148 | column-name="Line 1" 149 | column-color="green" 150 | column-values="2011,2012,2013,2014,2015" 151 | column-type="line"/> 152 | <chart-column column-id="x2" 153 | column-name="Line 1" 154 | column-color="green" 155 | column-values="250,150,300,250,200" 156 | column-type="line"/> 157 | <chart-points point-radius="5" 158 | show-point="true" 159 | point-expand-enabled="true" 160 | point-expand-radius="10"/> 161 | <chart-region region-id="x1" 162 | region-style="dashed" 163 | region-starts="2011" 164 | region-ends="2013"></chart-region> 165 | <chart-axes values-xs="x1:line1,x2:line2"></chart-axes> 166 | </c3chart> 167 |168 |
Creating a pie diagram is as easy as providing a number of chart-column elements. You can configure 4 | a few options using the chart-pie directive.
5 |6 | <c3chart bindto-id="pie-plot1-chart" sort-data="desc"> 7 | <chart-column column-id="Data 1" 8 | column-values="70" 9 | column-type="pie"/> 10 | <chart-column column-id="Data 2" 11 | column-values="35" 12 | column-type="pie"/> 13 | <chart-column column-id="Data 3" 14 | column-values="60" 15 | column-type="pie"/> 16 | <chart-pie expand="true" show-label="true" threshold-label="0.1"/> 17 | </c3chart> 18 | 19 |20 |
Using the color configuration options it is possible to specify the colors to use in the pie chart. In the 34 | following sample we specify the colors to use in a pattern array.
35 |36 | <c3chart bindto-id="pie-plot1-chart" sort-data="desc"> 37 | <chart-column column-id="Data 1" 38 | column-values="70" 39 | column-type="pie"/> 40 | <chart-column column-id="Data 2" 41 | column-values="35" 42 | column-type="pie"/> 43 | <chart-column column-id="Data 3" 44 | column-values="60" 45 | column-type="pie"/> 46 | <chart-colors color-pattern="#000,#888,#ccc"/> 47 | <chart-pie expand="true" show-label="true" threshold-label="0.1"/> 48 | </c3chart> 49 | 50 |51 |
Using the color configuration options it is possible to specify the colors to use in the pie chart. In the 66 | following sample we specify the colors using a color function. At the moment I cannot use the value, but 67 | I can use the name of the columns in the function
68 |69 | <c3chart bindto-id="pie-plot1-chart" sort-data="desc"> 70 | <chart-column column-id="Data 1" 71 | column-values="70" 72 | column-type="pie"/> 73 | <chart-column column-id="Data 2" 74 | column-values="35" 75 | column-type="pie"/> 76 | <chart-column column-id="Data 3" 77 | column-values="60" 78 | column-type="pie"/> 79 | <chart-colors color-function="vm.calculateColor"/> 80 | <chart-pie expand="true" show-label="true" threshold-label="0.1"/> 81 | </c3chart> 82 |83 |
84 | function calculateColor(color, value) {
85 | if (value === "Data 1") {
86 | return "red";
87 | } else if (value === "Data 2") {
88 | return "blue";
89 | } else if (value === "Data 3") {
90 | return "yellow";
91 | } else {
92 | return "green";
93 | }
94 | }
95 |
96 | Using the color configuration options it is possible to specify the colors to use in the pie chart. In the 110 | following sample we specify the colors however in the columns themselves.
111 |112 | <c3chart bindto-id="pie-plot1-chart" sort-data="desc"> 113 | <chart-column column-id="Data 1" 114 | column-values="70" 115 | column-type="pie" 116 | column-color="red"/> 117 | <chart-column column-id="Data 2" 118 | column-values="35" 119 | column-type="pie" 120 | column-color="orange"/> 121 | <chart-column column-id="Data 3" 122 | column-values="60" 123 | column-type="pie" 124 | column-color="cyan"/> 125 | <chart-pie expand="true" show-label="true" threshold-label="0.1"/> 126 | </c3chart> 127 |128 |
Getting started
37 |Generic configuration
41 |Bar examples
45 |Line examples
49 |Pie examples
53 |Donut examples
57 |Gauge examples
61 |Callback examples
65 |Dynamic examples
69 || " + title + " | |
|---|---|
| " + name + " | "; 107 | text += "" + value + " | "; 108 | text += "