CoCreate-charts

A headless vinilla javascript micro component. Easy configuration using HTML5 attributes or Javscript api.

Install

npm i @cocreate/charts

Or you can use cdn link:

<script>https://cdn.cocreate.app/charts/latest/CoCreate-charts.min.js</script>

Usage

This is xxxxx usage

                        
<canvas chart="chartjs" chart-type="bar" chart-options="" chart-labels="January, February, March, April, May, June, July" chart-title="Combine Chart">
    <div chart="chartjs"chart-dataset-type="line">
      <div fetch-collection="chart" fetch-name="Jan" chart-operator="sum">
        <div filter-name="Jan" filter-value="0, 10" filter-value-type="number" filter-operator="range"></div>
      </div>
      <div fetch-collection="chart" fetch-name="Feb">
        <div filter-name="permission" filter-value="read" filter-operator="nin"></div>
        <div filter-name="type" filter-value="leader" filter-operator="in"></div>
      </div>
      <div fetch-collection="chart" fetch-name="Mar">
        <div filter-name="Mar" filter-value="-7" filter-operator="eq" filter-value-type="number"></div>
      </div>
      <div fetch-collection="chart" fetch-name="Apr"></div>
      <div fetch-collection="chart" fetch-name="May"></div>
      <div fetch-collection="chart" fetch-name="Jun"></div>
      <div fetch-collection="chart" fetch-name="Jul"></div>
    </div>
</canvas>
                        
                            

This is xxxxx usage

This is xxxxx usage

Attributes

  • chart-type string optional

    Chart type

  • chart-options string optional

    Chart options

  • chart-labels string optional

    Chart column labels

  • chart-title string optional

    Chart title

  • chart-dataset-type string optional

    Chart dataset type

Demo