Chart.js

Dokumentasi Chart.js

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>

    
      <script>
        (function() {
          // INITIALIZATION OF CHARTJS
          // =======================================================
          document.querySelectorAll('.js-chart').forEach(item => {
            Nue.components.NueChartJS.init(item)
          })
        });
      </script>

Line chart

Updating line chart

Use "gradientPosition": {"x0": 0, "y0": 0, "x1": 0, "y1": 200} to set position for gradient.

Strong line chart

Line chart with grid

Bar chart

Updating bar chart

Doughnut chart

Updating doughnut chart

Half circle chart

Updating half circle chart

Bubble chart

Matrix chart

ChartJS methods

ParametersDescriptionDefault value
options.scales.yAxes.ticks.prefixPreffix for yAxes.false
options.scales.yAxes.ticks.postfixPostfix for yAxes.false
options.scales.yAxes.ticks.metricMetric output for axes (1k, 1kk, etc..).false
options.responsiveResponsive chart.true
options.maintainAspectRatioMaintain the original canvas aspect ratio (width / height) when resizing.false
options.legend.displayLegend for chart.false
options.tooltips.enabledEnable or disable tooltips.false
options.tooltips.prefixPrefix for tooltip text.false
options.tooltips.postfixPostfix for tooltip text.false
options.tooltips.yearStampAdded year after title.true
options.tooltips.hasIndicatorAdd indicator for tooltip.false
options.tooltips.indicatorWidthWidth indicator.8px
options.tooltips.indicatorHeightHeight indicator.8px
options.tooltips.lineModeSet line tooltip type.false
options.tooltips.lineWithLineColorSet color for line.null
options.tooltips.lineWithLineBottomOffsetOffset of the top for line.7
options.tooltips.lineWithLineBottomOffsetOffset of the bottom for line.43
options.gradientPositionGradient position.{ x0: 0, y0: 0, x1: 0, y1: 0 }

Matrix methods

ParametersDescriptionDefault value
options.matrixBackgroundColor.colorSet color for matrix chart.null
options.matrixBackgroundColor.accentSet accent color for matrix chart. Usually this is the maximum value from datasets.null
options.matrixBackgroundColor.nullColorSet custom color for empty items in matrix chart.false
options.matrixBackgroundColor.additionToValueAdd addition value to value of item in matrix chart.5
options.matrixLegend.containerWrapper for custom legends.5
options.matrixLegend.stepSizeStep size for legends.max / 10
options.matrixLegend.metricMetric output for legend values (1k, 1kk, etc..).false